> ## 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 × Bubble Integration: No-Code Setup Guide

> Connect Robylon to your Bubble app in minutes. Add chat widgets, secure webhooks, and event tracking-without code. Bubble is a no-code website builder.

### 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 with the left sidebar open and Settings selected to configure your chatbot" 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="Settings → Channels screen in the Robylon dashboard for bot integrations" 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="Channels page with the Chatbot widget selected to access bot details" 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="Chatbot details showing the Install tab for adding the widget to Bubble" width="1898" height="823" data-path="Robylon4.png" />
   </Frame>
6. Select JavaScript to embed code in Bubble.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon5JS.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=66abec3b90dffa30028202101fbba7f2" alt="Install tab with the JavaScript embed option chosen for Bubble apps" width="1870" height="820" data-path="Robylon5JS.png" />
   </Frame>
7. Copy the provided chatbot embed code.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon6JS.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=65edf9b8a91ff77472ba55f198cc122d" alt="Robylon chatbot Bubble integration embed code snippet in the dashboard" width="1861" height="841" data-path="Robylon6JS.png" />
   </Frame>

### **Step 2**: Embed Robylon Chatbot on Your Bubble App

1. Once you’ve copied your Robylon embed code, sign in to your Bubble account and head to your account dashboard.
2. On your dashboard, pick the Bubble app or website you wish to embed the chatbot on.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble1.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=b182cb6ffa9d98436cd1542f8e57bb63" alt="Bubble dashboard to pick the app or page where the Robylon chatbot will be embedded" width="1871" height="843" data-path="images/Bubble1.png" />
   </Frame>
3. Scroll down to the section of the page you want to add the embed code.
4. On the left sidebar of the editor, locate the HTML component and drag it to any section of the page to add a chatbot.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble2.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=67ce5d88437e69eac468a05de1a47068" alt="Bubble editor: drag the HTML element from the left sidebar onto the page for Robylon chatbot integration" width="1904" height="799" data-path="images/Bubble2.png" />
   </Frame>
5. Double-click on the HTML component to reveal the code editor.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble3.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=97778aed5946abe67cecdd14f63950e3" alt="Double-click the HTML element in Bubble to open the code editor" width="1898" height="844" data-path="images/Bubble3.png" />
   </Frame>
6. Paste the Robylon Embed code copied earlier into the editor.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble4.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=645347737a96be9abff9be7969c59919" alt="Paste the Robylon embed code into the Bubble HTML editor" width="1525" height="784" data-path="images/Bubble4.png" />
   </Frame>
7. You can now preview your Bubble app to test your chatbot.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble5.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=4953c1a9f146df2b61e0e4bb6ce8db27" alt="Preview the Bubble app to test the Robylon chatbot integration" width="1829" height="850" data-path="images/Bubble5.png" />
   </Frame>

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble6.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=6213f3e9cf8078205b4bb50c92b7e06c" alt="Page preview showing the Robylon chatbot launcher visible on the site" width="1891" height="793" data-path="images/Bubble6.png" />
   </Frame>

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/Bubble7.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=9809a3bcc6e5204ee49757c6acfd4343" alt="Chat window open, confirming the Robylon chatbot works inside the Bubble app" width="1876" height="825" data-path="images/Bubble7.png" />
   </Frame>