My Website

> 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/introduction/getting-started.md). # Getting started ### 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: ```html My Website ``` 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: ```html ``` 5. Replace `YOUR_API_KEY` with your Frontnow Advisor API key. 6. Scroll down to the "Triggering" section and choose the trigger(s) that should activate this tag, e.g., Initialization - All Pages. 7. 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: ```html

``` Initialize the Advise with a second parameter that specifies the target element as an [**HTMLElement**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement): ```javascript const containerElement = document.getElementById("your-container"); const advisor = new AdvisorSDK("YOUR_API_KEY", containerElement); ``` Customize the size and position of the container using CSS: ```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, 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. ```typescript 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 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](/advise/integration/methods.md) page. #### Methods Leverage the available methods to customize the functionality of Advise. For more details, visit the [Methods](/advise/integration/events.md) 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. --- # 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/introduction/getting-started.md?ask=&goal= ``` `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.