# 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`:

```javascript
<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:

```javascript
<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.


---

# Agent Instructions: 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:

```
GET https://docs.expertpal.io/widget-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.