Skip to main content

Embed Widget

With the generated loader script code, a simple boilerplate code and your partner key, you can load the widget using any front-end technology you choose.

What is a Partner Key?​

Your partner key is a unique string (word) given to you alongside your login details to the dashboard. It is used in place of your API key because it is less security-sensitive. When embedding the widget, you must include your partner key for it to work.

However, for this guide, we are using 'curacel' as our test partner key in the Sandbox environment.

Loader Code Scripts for Each Environment​

Note that there are two different loader code scripts that would be generated for the Sandbox and Production environments respectively.

SandboxProduction/Live
<script src="https://master.d26hh7rmuigv1o.amplifyapp.com/v1.js"></script><script src="https://embeds.curacel.co/grow/v1.js"></script>

Check out the next set of guides on how to embed the Grow widget into your site or app.

Embed Widget Using HTML​

Let's create a simple HTML page containing every basic meta tag and the widget script code you copied from your dashboard. Place the script code in the <body /> section of the HTML document as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://master.d26hh7rmuigv1o.amplifyapp.com/v1.js"></script>
</body>
</html>

Great! Now let's add some boilerplate JavaScript code to the body section as well, to successfully call the widget using a button.

<script>
        /* 
          The user information.
          Depending on the type of product your user is purchasing, more information
          may be required. See https://docs.curacel.co/docs/reference/grow-api/create-new-customer/
        */
          const user = {
              first_name: "John",
              last_name: "Doe",
              email: 'j.doe@example.net'
          }
        
        const callback = function(data) {
          console.log('callback received...', data);
      
              if(data.status == 'success') {
                  // Order was created successfully
                  const order = data.order;
                  const amountToChargeUser = order.product_price;
                  const currency = order.currency;
      
                  //Next steps:
                  //1. Charge the amount to the user (Use any payment system of choice)
                  //2. If payment succeeds:
                  //2.1 Call order authorisation API from your server to authorise the order
            
            //Note: Unauthorised orders will not be processed.
      
                  charge(order);
              }
      
              if(data.status == 'failed') {
                  // order could not be created
              }
        }
        
        const charge = function(order) {
              // insuranceWidget.close();
              console.log('charging', order.product_price);
          }
        
        const config = {
              user,
              callback,
              partnerKey: 'curacel'
          }
        
          const insuranceWidget = CuracelGrow.createInsuranceWidget(config);
      
      </script>

Looking at the code above, the Curacel Grow widget is created by the built-in createInsuranceWidget() function stored in a variable called insuranceWidget. The createInsuranceWidget() function accepts a config object as its parameter.

This config object contains:

  • the dummy strings that are hardcoded in the user object with the first_name, last_name and email keys.
  • a function called callback which accepts any action logic handling the purchase success, purchase failure, order price and so on.
  • the partnerKey which is required in place of API token, as it is less security-sensitive.

With this basic setup, we are ready to launch our widget, but one more thing! We need to add an event listener to call theinsuranceWidget on click of a button.

<button onclick="insuranceWidget.open()">Buy insurance</button>
note

The loader script code differs for both Sandbox and Production environments:

  • Sandbox: <script src="https://master.d26hh7rmuigv1o.amplifyapp.com/v1.js"></script>
  • Production: <script src="https://embeds.curacel.co/grow/v1.js"></script>