# Overview

{% hint style="info" %}

## <mark style="color:blue;">Get Access</mark>

The first step to integrating Frontnow Advisor to your website is to get access to the solution. Contact our sales representative at <sales@frontnow.com> to request access.
{% endhint %}

## Initialization Code

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

```html
<!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](https://docs.frontnow.com/advise/2/integration/display-modes) 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:

```html
<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:

```html
<!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.
