# Webflow

### Step 1: Sign Into Your uClone Account and Copy Your Embed Code

\
1\. Log into your uClone account and navigate to the [**Dashboard**](https://www.chatbase.co/dashboard/) page.\
2\. On the page, locate and click on the **Integrations** tab at the top of the page.\
3\. On the connect tab, click on **Copy** to copy the embed code.

<figure><img src="https://1933705455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLLV1FGcR9rovGx9Z9Xt8%2Fuploads%2FF9H3RWWW70lttZnJzvGT%2Fimage.png?alt=media&#x26;token=18613136-0984-43a2-8146-2b5dd69c291b" alt=""><figcaption></figcaption></figure>

### Step 2: Set Up a Container to Display Your Chatbot Widget&#x20;

\
Before adding the embed code to your Webflow site, you will need to create a container to display the widget. This will ensure that the widget is displayed in the correct place on your website and doesn't extend the entire width of the page.

1\. To create a container, on Webflow, log into your Webflow account and go to your dashboard.

2\. On your Webflow dashboard, you’ll find a list of all your website projects, hover on the website you want to add the chatbot to and click on **Open Designer**.

\


<figure><img src="https://1933705455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLLV1FGcR9rovGx9Z9Xt8%2Fuploads%2FXkKZbzqkYUg0WWobBAJW%2Fimage.png?alt=media&#x26;token=543b71f6-1fdf-4488-905c-cfe587594fdb" alt=""><figcaption></figcaption></figure>

\
3\. On the designer page, click on the file icon (**Pages**) on the top left corner of the webflow site designer and select the page you want to embed the chatbot.

\
4\. Once you’ve selected the page, click the Plus button (**Add elements**) on the top left corner of the designer screen, and a list of available elements should come up.

5\. Drag the **Section** element to the portion of the page you want to embed your chatbot.

6\. Drag a **Container** element unto the **Section.**

7\. Drag a **Div** element unto the Container element and set the size of the Div element to ensure that the bot will be contained within the Div and does not span the entire width of the page.

<figure><img src="https://1933705455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLLV1FGcR9rovGx9Z9Xt8%2Fuploads%2FVzJhWOMafmLfguZ1b3OC%2Fimage.png?alt=media&#x26;token=2d187658-0e8a-46d5-923a-5c394d130b99" alt=""><figcaption></figcaption></figure>

8\. Now, scroll down down the list of elements and drag the **Embed** element unto the Div you added on the Webflow canvas.\


<figure><img src="https://1933705455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLLV1FGcR9rovGx9Z9Xt8%2Fuploads%2FhsQ3tYy0iVcwwQ9N7R6g%2Fimage.png?alt=media&#x26;token=21692473-8df9-4845-80b5-bf7a7e011a45" alt=""><figcaption></figcaption></figure>

9\. Select and double-click the Embed element to reveal the HTML Embed code editor.

10\. Paste the uClone chatbot embed code from Step 2 above and click **Save & Close**.

If all goes well, you should see a preview of the chatbot on the live preview of your Webflow website right inside the designer.



\
If you are having difficulties with managing the dimension of your Embed and chatbot element, it is a common problem. Webflow components take a bit of getting used to. You can follow this [official Webflow documentation on the Embed element](https://university.webflow.com/lesson/custom-code-embed?topics=elements) to learn more about embedding a third-party tool like uClone chatbot on a Webflow website.
