Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Getting started

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

Step 1: Get the Frontnow Advise Code

To start using the Frontnow Advise obtain your API key by contacting your dedicated Customer Success Manager. With your key, you can add Advise 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. Frontnow Advise 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 Advise library -->
    <script src="https://sdk.frontnow.app/v1/advisor.js"></script>
    <script>
        // Initialize Frontnow Advise
        const advisor = new AdvisorSDK("YOUR_API_KEY");
    </script>
</head>
<body>
    <!-- Your website content here -->
</body>
</html>

Replace YOUR_API_KEY with your Frontnow Advise 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 Advise code as Custom HTML to Google Tag Manager, follow these steps:

  1. Log in to your Google Tag Manager account and select the desired container.

  2. In the left-hand menu, click on "Tags" and then click on "New".

  3. Give your tag a name and click on the tag configuration section.

  4. Choose "Custom HTML" as the tag type and enter the following code:

  1. Replace YOUR_API_KEY with your Frontnow Advisor API key.

  2. Scroll down to the "Triggering" section and choose the trigger(s) that should activate this tag, e.g., Initialization - All Pages.

  3. Save the tag and submit your changes.

API Key

You will get the API key during the onboarding process from your Customer Success Manager.

Step 3: Render Advise in a Target Element (Optional)

By default, Frontnow Advise 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 Advise to appear:

Initialize the Advise with a second parameter that specifies the target element as an HTMLElement:

Customize the size and position of the container using CSS:

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, Advise 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 Frontnow Advise. 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 Advise’s language selection menu at any time.

Step 5: Customize Frontnow Advise

Every website is unique, and we want Frontnow Advise to fit perfectly with yours. During onboarding you will receive templates to customize Frontnow Advise. Soon, there will be also the option to 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 Advise's appearance and behavior, ensuring a seamless integration with your website's look and feel.

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

Step 6: Utilize Events and Methods

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

Events

You can listen for different events triggered by Advise to enhance the user experience. For more information, visit the Events page.

Methods

Leverage the available methods to customize the functionality of Advise. For more details, visit the Methods page.

Step 6: Test Frontnow Advise

Before launching Frontnow Advise, it is crucial to test it to ensure it works properly. Navigate through your website, ask questions, and review the suggestions provided by the Advise. Verify that the recommendations are relevant and accurate. Your dedicated Customer Success Manager will guide your through the testing phase.

Frontnow Advise 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 Frontnow Advise and customize it to fit your brand.

PreviousIntroduction to Frontnow
NextGetting access to Frontnow

Last updated

Was this helpful?