# Website widget

## Use your twise as a better looking chat bot alternative

You can now add a widget to your website that will open in an overlay:

<figure><img src="/files/bVKZN0vBEIqcdUPxgy2X" alt=""><figcaption></figcaption></figure>

### Welcome message for the widget

You can configure a welcome message that will appear next to the widget upon load. This message can be changed to anything you like.&#x20;

Use the text \[YOUR TWISE NAME] to insert the name of the twise automatically.&#x20;

You can change the colors of the text and the background as well.

<figure><img src="/files/I68gxlCO8trX3isPYyux" alt=""><figcaption></figcaption></figure>

### Widget customisation

You can change the width and height of the actual overlay that opens when someone click the widget.

That is done by updating the actual code:

```
    var WIDTH = "1600px";
    var HEIGHT = "900px";
```

### Alert user to speak to the widget

The widget can be set to alert the user by changing the page title. This is a common practise for chatbots but can also be a distraction.

![](/files/lxLVdk5qMIMnGGJKp4qx)&#x20;

### How to install the widget

To be able to add the widget to your website you will need to be able to have acces to the code.&#x20;

We offer a javascript code that needs to be added inside the \<head> tag of the entire site or on the specific pages where you want the widet to appear.&#x20;

The code can be found under SHARING in the admin and then under Install Twise Widget:

<figure><img src="/files/m0pe9mRORGIDNah3PlkG" alt=""><figcaption></figcaption></figure>

### Use any link or button on your site to open the widget

Assuming you have access to the code of your site, and know a little code, you can show the widget through a click on any button or link on your page.&#x20;

**Activate Hide avatar:**

<figure><img src="/files/FxDDDQUEmjuoKcrr2geB" alt=""><figcaption></figcaption></figure>

Add this attribute to any HTML element where you want to activate the Twise widget. For instance, add `<button data-twise>Open Twise</button>` to a button element to enable users to open the widget directly through this button.


---

# 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://help.twise.ai/sharing/website-widget.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.
