Setup

2 min read

Installing the Eucera SDK to Your SaaS Product (SPA/MPA) #

    1. Go to your subscription settings > product settings
    2. Create new product

Inject the snippet in the <head> tag and update the user.id, subscriptionId and other relevant fields

Injecting Eucera async SDK in the <head> tag #

This call is nonblocking and will not impact the product or website’s performance

The TAG_KEY can be found under Subscription settings > Product settings 

				
					<script type="text/javascript">
const TAG_KEY = "YOUR-PRODUCT-TAG-KEY-HERE";

(function (w, d, u, n, k, c) {w[n]=w[n]||function () {(w[n].q = w[n].q || []).push(arguments);};
        w[n].k = k;w[n].c = c;var s = d.createElement('script');s.async = true;s.src = u + '?k=' + k;
        var h = d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s, h);
})(window, document, 'https://script.eucerahive.io/web/sdk/eucera.js', 'eucera', TAG_KEY);
</script>

Waiting for the initialization of the eucera variable

				
					eucera('when', 'ready', () => {
  //put your code here
});
Tracking User and Subscription usage #

Using the identify function to track user and subscription attributes

				
					const context = {
    user: {
        id: 'user-12345', // mandatory 
        email: 'user12345@example.com',
        name: 'John Doe',
        role: 'admin',
        image: 'https://example.com/images/user12345.jpg',
        phone: '+1234567890',
        timezone: 'America/New_York',
        signUpDate: 1707164462000,
        location: {
            country: "USA",
            region: "Northeast",
            state: "New York",
            city: "New York City",
            postalCode: "10001"
        }
        // add custom attributes here after creating them in your subscription
        
    },
    subscription: {
        id: 'subscription-12345' // mandatory 
         // add custom attributes here after creating them in your subscription
    }
}

eucera('when', 'ready', () => {
    eucera.identify(context);
});
Tracking Product Custom Events #

Use track method to track user events. You can set event properties from type string, numeric, boolean, and utcms for date

				
					eucera('track', 'video_watched', {"category": "commedy"});
Copilot Setup #

Initialize your AI Copilot using the API name defined in the copilot Setup tab

				
					<script type="text/javascript">
// using the api name of your copilot
const ONBORADING_COPILOT_ID = 'onboarding';

eucera('when','ready', () => {
  eucera('copilot', ONBORADING_COPILOT_ID, 'show');
});
</script>
Controlling Copilot visibility #

Using show and hide can control copilot’s visibility on the page

				
					//show
eucera('copilot', ONBORADING_COPILOT_ID, 'show');
//hide
eucera('copilot', ONBORADING_COPILOT_ID, 'hide');
Full Copilot Setup Example #

Calling the SDK and displaying copilot when ready

				
					<script type="text/javascript">

   const TAG_KEY = "YOUR-PRODUCT-TAG-KEY-HERE";
    (function (w, d, u, n, k, c) {w[n]=w[n]||function () {(w[n].q = w[n].q || []).push(arguments);};
        w[n].k = k;w[n].c = c;var s = d.createElement('script');s.async = true;s.src = u + '?k=' + k;
        var h = d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s, h);
})(window, document, 'https://script.eucerahive.io/web/sdk/eucera.js', 'eucera', TAG_KEY);
    
    //listen to Eucera ready and call copilot show
    const COPILOT_API_NAME = 'onboarding';
    eucera('when', 'ready', () => {
        eucera('copilot',COPILOT_API_NAME, 'show');
    });
    
</script>
 Advanced copilot setup using feature flag #

Installing Copilot using feature flag allows for gradual rollout, easy to switch on and off as well as using multiple copilots to address the different user journey such as Trial, Onboarding or for different objectives or personas.

				
					 <script type="text/javascript">
    const TAG_KEY = "YOUR-PRODUCT-TAG-KEY-HERE";
    (function (w, d, u, n, k, c) {w[n]=w[n]||function () {(w[n].q = w[n].q || []).push(arguments);};
        w[n].k = k;w[n].c = c;var s = d.createElement('script');s.async = true;s.src = u + '?k=' + k;
        var h = d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s, h);
    })(window, document, 'https://script.eucerahive.io/web/sdk/eucera.js', 'eucera', TAG_KEY);

    // copilot api names
    const ONBOARDING_COPILOT_ID = 'onboarding';
    const SUPPORT_COPILOT_ID = 'support';
    //listen to Eucera ready and execute show for specific copilot based on the
    //feature flag value
    eucera('when', 'ready', () => {
        const isOnboardingFeatureEnabled = eucera.getVariant(COPILOT_FEATURE_FLAG, true);
        const copilotID = isOnboardingFeatureEnabled ? ONBOARDING_COPILOT_ID : SUPPORT_COPILOT_ID; 
        eucera('copilot',copilotID, 'show');
    });
</script>
Using Eucera Feature Flag #

Initialization of the feature management functionality allows for passing a context object for variant evaluation as well as exposes a ‘ready’ state which indicates the variants can be evaluated.  

				
					 <script type="text/javascript">
    const TAG_KEY = "YOUR-PRODUCT-TAG-KEY-HERE";
    (function (w, d, u, n, k, c) {w[n]=w[n]||function () {(w[n].q = w[n].q || []).push(arguments);};
        w[n].k = k;w[n].c = c;var s = d.createElement('script');s.async = true;s.src = u + '?k=' + k;
        var h = d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s, h);
    })(window, document, 'https://script.eucerahive.io/web/sdk/eucera.js', 'eucera', TAG_KEY);

    //listen to Eucera ready and evaluate feature flag values
    eucera('when', 'ready', () => {
      
      // boolean flag, default true
       const showEarlyAccess = eucera.getVariant('showEarlyAccess', true);
  
        // numeric flag - can be integer or float, assigning the default value as 1.2
       const showReleaseVersion = eucera.getVariant('showReleaseVersion', 1.2);
  
    // string flag, assigning the default value as 'freemium'
       const packageName = eucera.getVariant('packageName', 'freemium');
    });
</script>