search
Ctrlk

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.

hashtag
Step 1: Get the Frontnow Advise Code

To start using the Frontnow Advise, sign up for an account and obtain your API key. 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.

hashtag
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.

hashtag
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.

hashtag
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.

hashtag
API Key

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

hashtag
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.

hashtag
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 HTMLElementarrow-up-right:

Customize the size and position of the container using CSS:

hashtag
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.

hashtag
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.

hashtag
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.

hashtag
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.

hashtag
Events

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

hashtag
Methods

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

hashtag
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 FrontnowNextGetting access to Frontnow

Last updated

Was this helpful?