Overview

How to Integrate Frontnow Advisor to Your Website: A Step-by-Step Guide

Get Access

The first step to integrating Frontnow Advisor to your website is to get access to the solution. Contact our sales representative at [email protected] to request access.

Initialization Code

Once you've been granted access, you can integrate Frontnow Advisor to your website using the following initialization code:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->
    <div id="advisorContainer"></div>
    
    <!-- Include Frontnow Advisor library at the end of <body> -->
    <script src="https://cdn.frontnow.site/advisor.js"></script>
    <script>
        // Initialize Frontnow Advisor
        const advisor = new Advisor({
            name: "Frontnow Advisor",
            subdomain: "YOUR_ADVISOR_SUBDOMAIN", // or: customDomain: "advisor.yourdomain.com"
            mode: "embedded", // default: sidebar
            target: "#advisorContainer",
            language: "en",
            colorScheme: {
                primary: "#000000",
                secondary: "#ffffff",
                tertiary: "#ff0000"
            } 
        });
        
        // Handle events from the Frontnow Advisor
        advisor.on("init", function () {
            console.log("Advisor initialized");
        });
    </script>
</body>
</html>

In this code, replace YOUR_ADVISOR_SUBDOMAIN with your Frontnow Advisor subdomain.

The mode parameter determines the Display Mode that Frontnow Advisor will use, and the target parameter specifies the selector of the HTML element that will contain the embedded Advisor. You can change these parameters to suit your needs.

Add HTML Element (Embedded Mode)

Add the following HTML element to your website to display Frontnow Advisor:

<div id="advisorContainer"></div>

This code creates a container for the embedded Advisor to be displayed in. Make sure the target parameter in the initialization code matches the selector of the HTML element.

Loading Asynchronously

You can use the following script to load the advisor.js file asynchronously and call an initCallback function after the script has loaded successfully:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async Advisor.js</title>
  <script>
    function loadAdvisorScript(initCallback) {
      const script = document.createElement('script');
      script.src = 'https://cdn.frontnow.site/advisor.js';
      script.async = true;

      // Callback function when the script has loaded successfully
      script.onload = () => {
        if (typeof initCallback === 'function') {
          initCallback();
        }
      };

      // Error handling
      script.onerror = () => {
        console.error('Error loading advisor.js');
      };

      document.head.appendChild(script);
    }

    function initCallback() {
      // Initialize your Advisor instance here
      // You may assign the Advisor instance to window.advisor if needed
      const advisor = new Advisor(/* Your options here */);
      console.log('Advisor.js loaded and callback executed');
    }

    // Load the advisor.js script and pass the initCallback function
    loadAdvisorScript(initCallback);
  </script>
</head>
<body>
  <!-- Your HTML content -->
</body>
</html>

In this script, the loadAdvisorScript function creates a new script element, sets the src attribute to the advisor.js file, and sets the async attribute to true. The initCallback function is passed as an argument and will be called when the script has finished loading. If there's an error loading the script, an error message will be logged in the console. Finally, the script element is appended to the document head, which initiates the loading of the advisor.js file.

By following these steps, you can easily integrate Frontnow Advisor to your website and provide your visitors with personalized recommendations and guidance. If you have any questions or need assistance, please don't hesitate to contact us.

PreviousGlossary NextDisplay Modes

Was this helpful?

hashtagGet Access

hashtagInitialization Code

hashtagAdd HTML Element (Embedded Mode)

hashtagLoading Asynchronously

Get Access

Initialization Code

Add HTML Element (Embedded Mode)

Loading Asynchronously