> For the complete documentation index, see [llms.txt](https://docs.slatecx.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.slatecx.com/getting-started/embed-on-your-site.md).

# Embed on your site

One of the most common SlateCX use cases is to embed the chat/voice agent directly into your existing website. 

This page will walk you through how to set that up.

## Before you start

You will need:

* A campaign with at least one entry point. See [First campaign](/getting-started/first-campaign.md).
* The ability to modify the HTML of the page you want the widget on.

## 1. Get the snippet

In Admin, go to your campaign and open the entry point, click on **Publish** and then select **Website chat setup.**

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2FgpkYOjsWIQbUAJeXdzjd%2Fimage.png?alt=media&amp;token=75c194fc-0943-4b9d-bb97-aae6b935cbc8" alt=""><figcaption></figcaption></figure>

This will allow you to preview how the agent will look. As well as copy the code needed for you to embed into your own site.  You can see that below.

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2FibW6Y7RoI9MkL15WNDGu%2Fimage.png?alt=media&amp;token=e979adf9-b254-4c32-9d42-5554154d7638" alt=""><figcaption></figcaption></figure>

Select the **Install** tab.  This will show you the javascript that you will need to copy to your site.

Note that the actual configuration options might look different depending on how you setup your entry point.  Make sure you use the **Copy** button get the correct code for your website.

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2FxAqR44dfLZCFSsrBIIQk%2Fimage.png?alt=media&amp;token=969f7cbd-2a33-4000-895a-9f980819c9e3" alt=""><figcaption></figcaption></figure>

## 2. Advanced triggers

If you would like to embed triggers into your web pages that allow the agent to be launched by other parts of your page click on **API.**

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2Fd4UIGUMGucksB7bfsnnC%2Fimage.png?alt=media&amp;token=9006b9d1-31eb-4752-96e5-c2cb44c43e1c" alt=""><figcaption></figcaption></figure>

On the API page it will show a worked example (in this case its the Slater icon) and how you can trigger the agent by clicking on the icon.

Using this simple API you can create very interactive web pages as you can make any element of your page clickable and have it ask a relevant question whenever it is clicked.

## 3. Tune it from Admin, not the snippet

If you would like to change the way the widget looks you do this in Brand Identity.  Simply navigate to the 'Embed' tab to change color, fonts and size.  See below.

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2FqBtn9UmIleC5Y2gbvzbo%2Fimage.png?alt=media&amp;token=329df213-8a3b-41d9-9d1e-1eccdeca68af" alt=""><figcaption></figcaption></figure>

You can also change specific behaviors like the waves and display method in the entry point itself. See below.

<figure><img src="https://2844884401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5AhClAmEf81WtHS8kM9H%2Fuploads%2FUoxPSykybqxfqwFYyvAC%2Fimage.png?alt=media&amp;token=182896c0-2a37-4ba3-8f25-2dbd560279b5" alt=""><figcaption></figcaption></figure>

One common change is to modify the the entry point's open behavior:

* Compact Launcher is the typical chatbot button.
* Rich Card is a graphical chatbot button that is significantly larger.
* Edge Rail allows the agent to slide in from the side and consumes the full length of the screen.

## Next steps

* [Brand identity](/guides/brand-identity.md)