After you have published the Product Guide to either the Live or Stage environment, you can integrate the Product Guide into your shop or website. Therefore, you need the HTML code snippet which you can configure in the Integration Code view. You can find this view by hovering over the "Publish" button in the navigation bar.

This article describes the standard JavaScript integration. See Alternative Technologies for Site Integration if you want to check pros and cons of various integration technologies.

Table of Contents:

Integration Code Configuration

Before you can use your integration code, please make sure that all configuration options are set correctly. These options are:

• Environment:
  Choose in which environment you want to generate the integration code for. If you are not sure, please look at the site Stage versus Live Environment.
  
  
• Last Publish:
  Contains the date of the last successful publish process. If the Product Guide was never published to the environment, the date text is "-".
  
  
• Language:
  Sets the language the Product Guide is started with. In the preview URL and the site integration code it is encoded with e.g. xcLocale=de_DE for German.
  
  
• Theme:
  The selected theme will be used to show our advisor in the right styling. In the preview URL and the site integration code it is encoded with e.g. default.start or theme=river for the River theme.
  
  
• Channel ID:
  If your Product Guide is used in different websites with their own product assortment (e.g. in different countries or markets), please make sure to select the correct channel id per market. This ensures that each shop gets their own site integration code including only the the correct products but the same advise.
  Note: This setting is only visible if channel ids are available.
  
  
• Quick Link:
  Contains a URL to the published Product Guide. Just simply click on this URL and you will see a preview to evaluate whether the Product Guide has the intended behavior and recommendation list.
  

After each setting is changed, the preview link and the integration code is automatically updated in the view.

Quick Steps for Integration

1. Copy the site integration code (see image below) by either marking the text or clicking the "Copy Code" button.
2. Create an empty page in your website.
3. Paste the integration code into the integration page.

You may add more parameters to preset Answer Options or start on a different Stage as described in page Integration URL Parameters.

Full Documentation

There is a lot more to know about integrating your Product Guides effectively. You can tweak parameters, optimize for search engines (SEO) or use intro and fallback content. Please read our full site integration documentation for more details.

Site Integration Troubleshooting

Possible solutions if you have trouble integrating the Product Guide:

Make sure you are using the correct Channel ID

If your Product Guide will be used e.g. in different countries or markets, please make sure to select the correct channel ID per market. Every specific integration page needs to contain a different channel parameter in order for the Product Guide to display the right product assortment. Please note that the displayed language can be set separately.

See this example of the channel "jp-ja" (i.e. Japan) and the language English (en_GB) selected:

Remove empty characters if you use "document write"

If you are using a "document write" method to insert the integration code into your integration page, please make sure to remove all spaces and line breaks from the integration code. Otherwise, the "document write" method will not insert a correct integration code.

Read more about the Integration of URL Parameters