> For the complete documentation index, see [llms.txt](https://help.twise.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twise.ai/sharing/website-widget.md).

# 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.
