# Install the Robylon Chatbot on a Bubble App

Add the Robylon chatbot to your Bubble app by pasting the JavaScript snippet into an HTML element.

> Source: https://www.robylon.ai/docs/chatbot/install/bubble
> Section: Chatbot

To add the Robylon chatbot to a Bubble app, copy the chatbot's JavaScript snippet from Robylon and paste it into an HTML element on your page. You need edit access to the Bubble app.

## How do I copy the chatbot snippet from Robylon?

Go to **Settings → Channels → Chatbot**, click your chatbot, open the **Install** tab, choose **Web → Bubble**, and copy the snippet. It already contains your Chatbot ID. See [Installation](https://www.robylon.ai/docs/chatbot/installation) for what the snippet does.

## How do I add the chatbot to my Bubble app?

Add an HTML element to the page and paste the snippet into it.

<Steps>
  <Step title="Open your app in the Bubble editor">
    Sign in to Bubble and open the app you want to add the chatbot to.

    <Frame>
      <img src="/assets/docs/bubble-1.webp" alt="Bubble dashboard listing apps, with the app to add the chatbot to" width="1871" height="843" />
    </Frame>
  </Step>
  <Step title="Add an HTML element">
    In the editor's left sidebar, find the **HTML** element and drag it onto the page. Add it to every page where the chatbot should appear.

    <Frame>
      <img src="/assets/docs/bubble-2.webp" alt="Bubble editor with the HTML element being dragged from the left sidebar onto the page" width="1904" height="799" />
    </Frame>
  </Step>
  <Step title="Open the element's editor">
    Double-click the HTML element to open its code editor.

    <Frame>
      <img src="/assets/docs/bubble-3.webp" alt="Bubble HTML element opened for editing after a double-click" width="1898" height="844" />
    </Frame>
  </Step>
  <Step title="Paste the snippet">
    Paste the Robylon snippet into the editor.

    <Frame>
      <img src="/assets/docs/bubble-4.webp" alt="Robylon chatbot snippet pasted into the Bubble HTML element editor" width="1525" height="784" />
    </Frame>
  </Step>
  <Step title="Preview and test">
    Preview your app. The chatbot launcher appears in the corner of the page. Open it and send a test message.

    <Frame>
      <img src="/assets/docs/bubble-6.webp" alt="Bubble app preview with the chatbot launcher in the bottom corner" width="1891" height="793" />
    </Frame>
  </Step>
</Steps>

If the launcher does not appear, see [How do I know the chatbot is installed correctly?](https://www.robylon.ai/docs/chatbot/installation#how-do-i-know-the-chatbot-is-installed-correctly)