error messages in console

Advisor doesn't load at all, console errors about elements already existing

Solution: Make sure to only integrate one Advisor per Website and have exactly one xc_application div and one <script /> tag loading the excentos sources per page.

CORS errors

Solution: whitelist excentos on your website for xhr requests, images, fonts, scripts and stylesheets

Framework restrictions

Framework doesn't allow script tags that load an external source

Solution: Create script tag via JavaScript

If the framework allows you to write inline javascript, try loading the advisor with the following script in your HTML code

inline JS
<script>
    const scriptUrl = '//stage.excentos.com/demo/DE/app_Bike-Advisor/en_US/loadadvisor?theme=default';

    const tag = document.createElement("script"),
        body = document.getElementsByTagName('body')[0];
    tag.type = 'text/javascript';
    tag.src = scriptUrl;
    body.appendChild(tag);
</script>
<div id="xc_application">
    <div id="xc_application_pane"></div>
    <div id="xc_loader"></div>
</div>

Solution: Load advisor via local JavaScript file

If your Framework doesn't allow inline JavaScript but it does allow loading local javascript files, upload the following script to your CMS

xcLoader
/**
 * =============================================================================
 *  Copyright (c) 2022 excentos Software GmbH, Potsdam, Germany.
 *  All rights reserved. Do not redistribute. Strictly confidential.
 * =============================================================================
 */
const xcLoader = (win, doc) => {
    const env = 'stage';
    // const env = 'service' // use for production environment
    const acc = 'demo'; // account/company name
    const app = 'app_Bike-Advisor'; // application name
    const system = 'DE';

    const params = {
        xcTheme: 'default',
        xcLocale: 'en_US',
        // $channelid: '',
    }
    //*********************** lib ***********************//

    //inject service.jsinit
    var session = win.location.href.match(/xcSessId=[^&;? ]+/) || doc.cookie.match(/xcSessId=[^&;? ]+/);
    var jsessionid = (session && session.length > 0) ? ';jsessionid=' + encodeURIComponent(session[0].split('=')[1]) : '';


    const baseUrl = `https://${env}.excentos.com`;

    // let scriptSrc = `https://${env}.excentos.com/${acc}/${system}/restservice_v3_0/${app}/service.jsinit${jsessionid}?${paramsStr}`;
    const scriptUrl = new URL(`${acc}/${system}/restservice_v3_0/${app}/service.jsinit${jsessionid}`,baseUrl);
    scriptUrl.search = new URLSearchParams(params);

    var tag = document.createElement("script"),
        body = document.getElementsByTagName('body')[0];
    tag.type = 'text/javascript';
    tag.src = scriptUrl;
    tag.id = "xcJsInit";
    body.appendChild(tag);
};

xcLoader(window, document);

And load this script in your page, i.e. like this:

<script id="xc_loadadvisor" src="xcLoader.js"></script>

<div id="xc_application">
    <div id="xc_application_pane"></div>
    <div id="xc_loader"></div>
</div>

Or by using an appropriate component type your framework offers.

Solution: Integrate guide via Google Tag Manager

As a more flexible alternative, you may use the Google Tag Manager to integrate a Product Guide into your website. You should only consider this option if you are already using GTM in your website. 

Using GTM might also make it easier to change parameters (e.g. the theme that should be used) because you don't have to actually change your website code.

First, you need to split the integration code into two separate parts: The Script and the HTML.

Script
<script 
	src="//stage.excentos.com/CompanyName/DE/app_ApplicationName/locale/loadadvisor?theme=default"> 
</script>
HTML
<!-- end excentos integration code // start content area where Product Guide is displayed -->
<div id="xc_application">
	<div id="xc_application_pane"></div>  
	<div id="xc_loader"></div>
</div>
<!-- end excentos content area -->


First, add the HTML part to your website's html at the exact position where the Product Guide should be displayed.

To load the script code via GTM, log in to the google tag manager dashboard and create a new tag. Select the tag type "Custom HTML", add the Script code and configure the trigger to fire on the page where you added the HTML code.


  • No labels

Want a product tour, demo or free trial? Please visit us on www.excentos.com