Quick Installation

Overview

Installing the Chargebee Growth Solution involves three key steps:

1. Integrating with Chargebee Billing: Enables the Growth solution to access subscription data and perform necessary modifications.
2. Embedding the Chargebee Growth code snippet: Ensures the Growth solution is initialized on page load.
3. Initializing the solution: Initializes the solution and identifies users and syncs subscription information.
   • Setting up cancel flows: Configures the cancel experience for end users.

Let's look at each of these steps in detail.

Given that Chargebee Growth is in early access, it is currently available only for Retention customers who use Billing integration. To get access, you'll need to sign up for a Chargebee Retention trial, complete the integration with Chargebee Billing, and then reach out to our support team to enable Growth Solutions for your account. You can get started in one of the following ways:

• Sign up for Chargebee Retention from within your Chargebee Billing site.
• Sign up for Chargebee Retention from the Chargebee website(in which case, the API key integration is needed).

Once this is done, contact us to enable the Growth solution on your Chargebee account.

Step 1: Integrating with Chargebee Billing

The Growth solution requires an API key from your Chargebee Billing site to access subscription data and modify subscriptions for cancellations, discounts, plan changes, billing extensions, or pauses. If you signed up for Chargebee Retention from within your Chargebee Billing site, the API key is automatically updated in your Growth site. However, if you signed up for Chargebee Retention via the Chargebee website, you must add the API key manually.

To add an API key, follow these steps:

1. Log in to your Chargebee Billing site.

2. Navigate to Settings > Configure Chargebee > API Keys.

3. Click Add API Key and select Full-Access Key, if you would like Chargebee Growth to make subscription updates.

   

4. Select access levels for the key as required, specify a name and click Create Key.

   

5. Copy the newly generated API key.

6. Log in to your Chargebee Growth site.

7. Navigate to Settings > Integrations > Chargebee. Enter the Chargebee site name that you're integrating, and paste the API Key copied from your Chargebee Billing site.

   

8. Click Save & continue.

Your Chargebee Billing site is now successfully connected to the Growth solution.

Step 2: Embedding your code snippet in your site or application

To ensure that Chargebee Growth is initialized correctly, you must embed a JavaScript snippet within your website or application such that it is automatically initialised on page load. Next, you need to create a new Growth instance by passing the application ID of your Chargebee Growth application.

To embed the script on your application or site:

1. Identify a common location in your application where the snippet will load on every relevant page. We recommend embedding the java script snippet and making it available at a common location with your application to automatically initialize the Chargebee Growth instance.
   • If you have a single-page application, such as a React app, you can include our js in the index.html file. Doing so will automatically include the js code on all the pages.
   • If you have a multi-page application, you must include the js code on all the pages to load the js.
2. Retrieve the Application ID for your Growth instance:
   • Log in to your Chargebee Growth site.
   • Extract the App ID from the browser URL.
     
     For example, if the URL is https://app.chargebee.com/retention/kav8jMaojO, then kav8jMaojO is the App ID.
3. Add the following snippet to your site, replacing YOUR_APP_ID with the extracted App ID:

<script>
(function ()) 
const cbretention = new ChargebeeRetention({
api_key: <YOUR_APP_ID>
});
</script>

This step enables Chargebee Growth to identify users, sync subscription data, and direct them to the appropriate offer within Growth solution.

Step 3: Initializing the solution

Once the Chargebee Growth instance is created, you need to initialize the offer rendering solution by calling the init() function and passing user-specific details such as customer ID and email address to identify the logged-in user or customer.

To initialize the solution:

Add the following snippet, replacing the placeholders with actual user data:

(function () {
   const cbretention = new ChargebeeRetention({
       api_key: kav8jMaojO
   });

   cbretention.init({
       customer_id: "5634354", // Customer ID within the integrated billing site
       user: {
           email: "jdoe@fantasyworld.com", // Your end user's email address
           roles: ["engineer", "admin"], // End user's roles
       },
   });
})();

Your Chargebee Growth instance is now initialized and is ready to process user interactions. If you are using Growth solution alone, this step has you covered.

Setting up cancel flows along with offer flows

To use Growth solution along with Chargebee Retention, and to address churn and automate successful retention campaigns, you need to initialize the cancel flows as well and additionally embed the cancel button on your web page. If you have embedded the Chargebee Retention.js snippet on your site or app already, you can proceed to configure a cancel button within your Growth solution to enable a seamless cancellation experience.

To set up cancel flows:

1. Apply the id="bb-cancel" selector to the button or link users will click to initiate cancellation. For example: <button id="bb-cancel" href="">Cancel Subscription</button>.

2. Chargebee Growth will automatically detect this button and direct users to their personalized cancel experience.

If the JavaScript cannot process the request, the button will default to the href URL assigned in the link.

The above implementation steps are all you need to get started and they typically take only a few minutes to complete. Please reach out to us if you have any questions.