Widget Configuration

After you have registered your website on https://expertpal.io/button and received a widget ID and your code snippet you are ready to go. Just copy and paste the snippet into your website HTML code and you are ready to answer customer product inquiries.

The WidgetConfig interface defines the configuration options available for setting up the widget on your online store. Below are the available properties:

• widgetId (string): A unique identifier for the widget instance. This ID is mandatory for each widget.

• parentId (string, optional): The ID of the parent HTML element where the widget should be embedded. If not specified, the widget will be added to the body of the webpage.

• buttonShowAlways (boolean, optional): Determines whether the widget button should always be visible. If set to false or not set at all, the button will be hidden if any buttons with askprodbtn CSS class are present on the page. If set to true the floating button will be visible even if you have own button(s) on the page that should call the product assistant.

• position (string, optional): Defines the position of the floating button, can be either 'left' or 'right', if not set it will be displayed on the bottom left of the screen.

• colors (ColorTheme, optional): Specifies the color theme for the widget. The supported values are: 'slate', 'gray', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'black', 'white'

• fontFamily (string, optional): The font family to be used for text within the widget. This allows customization to match the store's branding. Make sure the font is loaded

• fontSize (string, optional): The font size for text within the widget. This should be a valid CSS font-size value (e.g., 14px, 1em).

• productPageUrlPrefixes (string[], optional): An array of URL prefixes in the form of regular expressions that determine which pages are considered product pages. The widget will only activate on pages whose URLs start with any of these prefixes. This is useful for stores with dynamic URLs, including those that incorporate locale information. This is an advanced feature for those familiar with regular expressions. It will test the URL (including the protocol) against the regular expressions you provide. The preferred way of installing the widget is by adding the initialization code snippet only to the product pages.

The most basic initialization snippet you need looks like this and needs only widgetId:

<script>
    window.$apwCfg={
        widgetId: 'your-widget-id',
    };
    var s=document.createElement('script');
    s.type='module';
    s.src='https://cdn.expertpal.io/ppwidget/index.0a32879e.js';
    document.getElementsByTagName('head')[0].appendChild(s);
</script>

Here is how example code snippet with configuration could look like with more options:

<script>
    window.$apwCfg={
        widgetId: 'your-widget-id',
        parentId: 'main-content',
        buttonText: 'Need help with this product?',
        position: 'left',
        buttonShowAlways: true,
        colors: 'blue',
        fontFamily: 'Arial, sans-serif',
        fontSize: '16px',
        productPageUrlPrefixes: ['/en/product/', '/de/product/']
    };
    var s=document.createElement('script');
    s.type='module';
    s.src='https://cdn.expertpal.io/ppwidget/index.0a32879e.js';
    document.getElementsByTagName('head')[0].appendChild(s);
</script>

Let us know if you need help with integration or a request for an additional option, we will help you to find a solution.