Getting started

As a developer, you can easily integrate the Advisor into your website using our simple API and customize it to fit your brand and user experience.

Step 1: Get the Frontnow Advisor Code

To start using the Frontnow Advisor, sign up for an account and obtain your API key. With your key, you can add the Advisor to your website by including our JavaScript library in your code and initializing the widget with your app.

Step 2: Embed the Code

Once you have the code, embed it into your website. You can either place the code directly into your website’s HTML or use Google Tag Manager for integration. The Frontnow Advisor will then appear on your website, providing personalized recommendations to your users.

Method 1: Direct Embedding

Place the following code snippet in the header or footer of your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <!-- Frontnow Advisor library -->
    <script src="https://sdk.frontnow.app/v1/advisor.js"></script>
    <script>
        // Initialize Frontnow Advisor
        const advisor = new AdvisorSDK("YOUR_API_KEY");
    </script>
</head>
<body>
    <!-- Your website content here -->
</body>
</html>

Replace YOUR_API_KEY with your Frontnow Advisor API key, which you can obtain by signing up for an account on our website.

Method 2: Using Google Tag Manager

To add the Frontnow Advisor code as Custom HTML to Google Tag Manager, follow these steps:

Log in to your Google Tag Manager account and select the desired container.
In the left-hand menu, click on "Tags" and then click on "New".
Give your tag a name and click on the tag configuration section.
Choose "Custom HTML" as the tag type and enter the following code:

<script src="https://sdk.frontnow.app/v1/advisor.js"></script>
<script>
  var advisor = new AdvisorSDK("YOUR_API_KEY");
</script>

Replace YOUR_API_KEY with your Frontnow Advisor API key.
Scroll down to the "Triggering" section and choose the trigger(s) that should activate this tag, e.g., Initialization - All Pages.
Save the tag and submit your changes.

API Key

API Key The API key you will get during the onboarding process from your account manager.

Step 3: Render the Advisor in a Target Element (Optional)

By default, the Frontnow Advisor renders in an absolute position and manages its own size and placement. If you'd like to display the Advisor within a specific element on your website for more control over its layout, you can specify a target element.

How to Render in a Target Element

Add a container element to your HTML where you want the Advisor to appear:

<div id="your-container"></div>

const containerElement = document.getElementById("your-container");
const advisor = new AdvisorSDK("YOUR_API_KEY", containerElement);

Customize the size and position of the container using CSS:

#your-container {
    width: 300px; /* Set your desired width */
    height: 400px; /* Set your desired height */
    position: relative; /* Or absolute, depending on your layout */
    margin: 0 auto; /* Centering example */
}

Notes:

Target Element Styling: When providing a target element, it is your responsibility to style it appropriately to ensure seamless integration with your website's design. Make sure it adapts well to different screen sizes.
Default Behavior: If you do not provide a target element, the Advisor will use the default absolute positioning, with its size and placement automatically managed by Frontnow.

Step 4: Set the Initial Language (Optional)

You can optionally pass a language key to the SDK to override the default language used when launching the Frontnow Advisor. This is especially useful for internationalized shops where the user might change the shop’s language.

The language key must follow the ISO 639-1 standard and be a two-letter language code (e.g., "de", "en", "es", "it").

Note that regional variants (e.g., "de-DE") are not supported—only base language codes are accepted.

The user can still change the language manually via the Advisor’s language selection menu at any time.

const containerElement = document.getElementById("your-container");
const langKey = "en" // this could be your current i18n lang code
const advisor = new AdvisorSDK("YOUR_API_KEY", containerElement, langKey);

Step 5: Customize the Frontnow Advisor

Every website is unique, and we want the Frontnow Advisor to fit perfectly with yours. Visit the Frontnow Studio to access a range of customization options. Here, you can easily adjust colors, texts, and styles to match your brand. Our intuitive interface makes it simple to tailor the Advisor's appearance and behavior, ensuring a seamless integration with your website's look and feel.

Explore all the customization features to make the Advisor truly yours, enhancing your user experience and maintaining brand consistency.

Step 6: Utilize Events and Methods

The Frontnow Advisor comes with a variety of events and methods that allow you to interact with and control the advisor programmatically.

Events

Methods

Step 6: Test the Frontnow Advisor

Before launching the Frontnow Advisor, it is crucial to test it to ensure it works properly. Navigate through your website, ask questions, and review the suggestions provided by the Advisor. Verify that the recommendations are relevant and accurate.

The Frontnow Advisor is a powerful tool designed to enhance the user experience on your website. By offering personalized recommendations, you can engage your users and encourage them to stay on your site longer. Follow the steps above to easily integrate the Frontnow Advisor and customize it to fit your brand.

PreviousIntroduction to Frontnow NextGetting access to Frontnow

Last updated 6 days ago

Was this helpful?

<!DOCTYPE html> <html> <head> <title>My Website</title>  <script src="https://sdk.frontnow.app/v1/advisor.js"></script> <script> // Initialize Frontnow Advisor const advisor = new AdvisorSDK("YOUR_API_KEY"); </script> </head> <body>  </body> </html>

#your-container { width: 300px; /* Set your desired width */ height: 400px; /* Set your desired height */ position: relative; /* Or absolute, depending on your layout */ margin: 0 auto; /* Centering example */ }

const containerElement = document.getElementById("your-container"); const langKey = "en" // this could be your current i18n lang code const advisor = new AdvisorSDK("YOUR_API_KEY", containerElement, langKey);