> 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.
* Select 'Settings' from the dropdown menu.
* In the Settings menu, look for the left sidebar.
* Click on the option labeled 'Custom Code"
.
* Click on '+' to create a new script.
**Configure Wonderchat Code**
* Go to your Agents page on Wonderchat dashboard.
* Click on the three dots to edit your chatbot.
* 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.
* Once satisfied with your settings, click 'Copy to Clipboard'.
* Paste the copied script under the code section.
**Set Script Details**
* 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.
* You have successfully connected Wonderchat with Framer.
