> ## Documentation Index
> Fetch the complete documentation index at: https://guides.robylon.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Robylon × Framer Integration: Add Chat to Your Site

> Embed Robylon on Framer sites with copy-paste code. Configure theme, launcher behavior, and identity for personalized conversations.

### **Step 1: Generate and Copy Your Robylon Chatbot Embed Code.**

1. Log in to your Robylon account and open the dashboard.
2. In the left panel, click on the settings button to navigate to the settings page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon1.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=c7b4c4c51ba8839c514508c2199c7ac6" alt="Robylon dashboard settings page showing where to access embed settings for chat widget" width="1909" height="830" data-path="Robylon1.png" />
   </Frame>
3. Within the settings tab, select [<u>Channels</u>](https://app.robylon.ai/settings/channels).

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon2.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=3c68c15e0c43443b2b6cb649409e9644" alt="Robylon dashboard, highlighting Channels section to access chatbot integration options" width="1887" height="832" data-path="Robylon2.png" />
   </Frame>
4. Click on the [<u>Chatbot</u>](https://app.robylon.ai/settings/channels/chatbot/interface) widget to access the chatbot details.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon3.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=3adcd9410a7c08fb6e7a558c1855631e" alt="Chatbot widget settings in the dashboard for integration with Framer" width="1894" height="825" data-path="Robylon3.png" />
   </Frame>
5. Navigate to the [<u>Install</u>](https://app.robylon.ai/settings/channels/chatbot/install) tab within the chatbot details page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon4.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=9f163359a767d412287a835ad527f107" alt="Click on the Install tab in the Robylon chatbot panel, select the embed code method for Framer" width="1898" height="823" data-path="Robylon4.png" />
   </Frame>
6. Select React to embed code in Framer.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon5React.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=d2680a2d9261393500d379590fb1eedd" alt="Embed configuration screen showing React option for Robylon chatbot in Framer" width="1870" height="820" data-path="Robylon5React.png" />
   </Frame>
7. Copy the provided chatbot embed code.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Robylon6React.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=eeaa6a41c4d9f841bcc8684a9ee02538" alt="Robylon React embed code snippet ready for copying to the Framer site" width="1896" height="843" data-path="images/Robylon6React.png" />
   </Frame>

### **Step 2**: Embed the code in Framer to Display Your Chatbot Widget 

1. To embed the code in Framer, log in to your Framer account and go to your dashboard.
2. Click on the website and select the page on that website you want to add the Robylon chatbot to.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Framer1.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=e86d3c409200356059b9f0f2200d70ba" alt="Framer dashboard with project selection view" width="1892" height="855" data-path="images/Framer1.png" />
   </Frame>
3. Now, click on the settings icon in the top right part of your Framer website dashboard.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Framer2.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=b239fe88e23987133b59df4392135b02" alt="The Framer site settings menu, where custom code can be added" width="1894" height="838" data-path="images/Framer2.png" />
   </Frame>
4. Click on the ‘General’ option in the sidebar of the Settings page. Scroll down to the ‘Custom Code’ section in settings.
5. Now paste the copied code of Robylon bot here at the End of the head tag.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Framer3.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=0059e7944fc3fd9632384a4d764a071e" alt="Paste the Robylon embed code into the Framer custom code head section" width="1885" height="830" data-path="images/Framer3.png" />
   </Frame>
6. Then save the settings and publish your Framer website to see the chat icon on that page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Framer4.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=80201881006af8ca80e0b209775bf8eb" alt="Framer settings with Custom Code fields and a highlighted Publish button to activate the Robylon chatbot" width="1910" height="786" data-path="images/Framer4.png" />
   </Frame>
7. Test the chatbot to see if it works fine, then you can push it for production.