> For the complete documentation index, see [llms.txt](https://docs.wonderchat.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/embedding-for-framer.md).

# Embedding for Framer

### Connecting Wonderchat with Framer: A Step-by-Step Guide

* Open your Framer page.
* Pass your mouse above "home"
* Click on the three dots in the top right corner.

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

* Select 'Settings' from the dropdown menu.
* In the Settings menu, look for the left sidebar.
* Click on the option labeled 'Custom Code"

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

.

* Click on '+' to create a new script.

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

**Configure Wonderchat Code**

* Go to your Agents page on Wonderchat dashboard.
* Click on the three dots to edit your chatbot.

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

* Select the option to "embed to website"
* A new tab will open where you can configure your bot settings:

  * Set the configuration
  * Choose widget size
  * Set position
  * Adjust display options
  * Modify behavior options.

  <figure><img src="/files/vik4oNqAWO7qaqrYQaiL" alt=""><figcaption></figcaption></figure>
* Once satisfied with your settings, click 'Copy to Clipboard'.
* Paste the copied script under the code section.

**Set Script Details**

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

* Assign a name for the script.
* Choose the correct placement for the script.
* Select the pages where you want the bot to appear.
* Decide when the script should run (e.g., on every page visit).
* After confirming all settings, click 'Publish' to apply changes to your Framer pages.

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

* You have successfully connected Wonderchat with Framer.