Skip to content
English
More support
  • There are no suggestions because the search field is empty.

How do I embed the IncentivesHub widget on my website?

Although the specific embedding steps for the IncentivesHub component vary, depending on a firm’s platform requirements, the overall process typically involves a few steps. To get started, refer to your website builder support page for general information on embedding a component on your website.

Embed Implementation Instructions:

A few common website builders include:

Overview of Key Steps:
  • Request a customized UUID from Pearl’s Product and Engineering team (if not already provided)
    • Pearl’s Product and Engineering Team will provide a firm with the necessary UUID, which a website administrator can use to configure and host the component on their website. The UUID is also used to display the firm’s name and logo on the IncentivesHub results page.
  • Insert the customized UUID into the embed code snippet
    • The UUID should be inserted within the “YOUR_UUID_GOES_HERE” portion of the embed code snippet below:

<script src='https://fasset.pearlcertification.com/incentives-hub/builds/production/flutter.js' defer></script>

<script>

 window._stateSet = function () {

   let appState = window._appState;

   var hostDiv = document.querySelector('#flutter_target');

   hostDiv.addEventListener('click', (event) => {

  if (document.activeElement.id !== hostDiv.id) {

    hostDiv.focus();

    appState.focus();

     }

   });

 };

 window.addEventListener('load', function(ev) {

   localStorage.setItem('uuid', 'YOUR_UUID_GOES_HERE');

   let target = document.querySelector('#flutter_target');

   if (target != null) {

  _flutter.loader.loadEntrypoint({

    entrypointUrl: 'https://fasset.pearlcertification.com/incentives-hub/builds/production/main.dart.js',

    onEntrypointLoaded: async function (engineInitializer) {

      let appRunner = await engineInitializer.initializeEngine({

           assetBase: 'https://fasset.pearlcertification.com/incentives-hub/',

        hostElement: target,

           renderer:'html',

      });

      await appRunner.runApp();

      console.log('Flutter app running!');

    },

  });

   }

 });

</script>

  • Access the host website’s HTML and insert the embed code snippet
    • The website administrator should add the embed code with a customized UUID within <head></head> tags on the page. Additionally, a div should be created wherever the firm would like the component to display on the page (see below).
    • Please use the following code and note, the width of the component can be adjusted, but not the height.

<div id="flutter_target" tabindex="0" style="height: 374px; min-width: 360px;"></div>

    • “tabindex” is required, however, the index can be whatever value the administrator chooses. 
  • Share the IncentivesHub host URLs with your Pearl Support Team.
    • Sharing URLs where the IncentivesHub will be tested and displayed allows Pearl to configure your embed instance with our address validation provider, enabling the address search feature to function properly.
  • Test the component on the web page
    • Open the firm’s website in a browser and navigate to the page with the embedded component.
      • Supported browsers for the Flutter component include Chrome, Safari, Firefox, and Edge
    • Test the component’s functionality to ensure it works correctly.
      • If the component doesn't appear or function correctly, double-check the embed code for accuracy or reach out to Pearl’s Product and Engineering team for support.
  • Preview, Save, and Publish the website changes
    • Finally, the administrator should review the website page to ensure the embeddable component functions as expected, save the update, and publish the changes 

Upon completing these steps, the embeddable component should be live and functioning on the firm’s website.

Summary:

As previously mentioned, the process of implementing the embeddable IncentivesHub component can vary based on the requirements of the website builder platform being used. If a firm’s website administrator and website platform provider are uncertain about carrying out the implementation independently or encounter challenges in the process, Pearl’s Product and Engineering teams are ready to offer support. Technical support requests can be submitted directly to Contractor Support.