Installation Guide

Embed Chargebee Growth 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.

Initialize the Growth 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.

Set 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.