Injecting Frontend Script

To directly integrate Envive AI frontend with your frontend, inject the following script into your website, in the <head> tags.

You need an API_KEY, please reach out to us if you don’t have one to use.

Installation

<!-- Envive -->
<script name='spiffy-react'>
  (function() {
    window._spiffy = {
      env: 'prod',
      show: true,
      publicKey: 'API_KEY'
    };
    var loadSpiffyScript = function() {
      var script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.spiffy.ai/production/universal-build/spiffy-react-components/index.js';
      script.fetchPriority = 'high';
      document.head.appendChild(script);
    };
    loadSpiffyScript();
  })();
</script>

A/B Experiment Deployment

You can use your own platform for setting up an A/B test, however please use the following custom HTML during setup.

Our primary request is to inject Envive script all on pages, even for control, so that we have visibility into the deployment and can debug any issues that come up.

Script for Envive off (control)

<!-- Add Envive Off -->
<script>
  (function() {
    var loadSpiffyScript = function() {
      window._spiffy = {
        env: 'prod',
        show: false,
        publicKey: 'API_KEY'
      };
      var script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.spiffy.ai/production/universal-build/spiffy-react-components/index.js';
      script.fetchPriority = 'high';
      document.head.appendChild(script);
    };
    loadSpiffyScript();
  })();
</script>

Script for Envive on

<!-- Add Envive On -->
<script>
  (function() {
    var loadSpiffyScript = function() {
      window._spiffy = {
        env: 'prod',
        show: true,
        publicKey: 'API_KEY'
      };
      var script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.spiffy.ai/production/universal-build/spiffy-react-components/index.js'
      script.fetchPriority = 'high';
      document.head.appendChild(script);
    };
    loadSpiffyScript();
  })();
</script>

Example for Intelligems

  1. Create a test of type “Content Test” > “Onsite Edits”

  2. Create 2 test groups, Control and Spiffy On

  3. Go to “Modifications” > “Styles and Javascript”

  4. For each of the two groups, put the above script (without the initial comment and the <script> tags), and select “Immediately” as the Javascript injection timing

    • Please replace the API_KEY with the one the Spiffy team provides

    • Here’s a sample screenshot of what it should look like for the Spiffy On (with the right name for the API_KEY)

PreviousDeploying Frontend WidgetsNextIntegrations

Last updated