> For the complete documentation index, see [llms.txt](https://docs.frontnow.com/advise/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frontnow.com/advise/2/integration/overview.md).

# 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](/advise/2/integration/display-modes.md) 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frontnow.com/advise/2/integration/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
