Install Chatlio on Webflow
If you use Webflow you can integrate Chatlio onto your site. First you’ll need to have your widget’s embed code available to copy and paste into your Webflow settings. Here is how to get your embed code ready:
- Open the Chatlio dashboard.
- Choose the widget that you would like to add to your site.
- Select the Widget Install tab.
- Choose what style of widget you want. There are three different ways to display the Chatlio widget on your site.
- Standard: Displays the Chatlio widget in bottom right corner of your site. Follow the install steps for Standard/Sidebar style
- Sidebar: Displays the Chatlio widget on the entire right sidebar of your site (when open). Follow the install steps for the Standard/Sidebar style
- Embed inline: Displays the Chatlio widget inline (always open). This is useful for styling your own popup or full page option for your visitors. Follow the install steps for the Embed inline style
- Keep the Chatlio dashboard Widget install tab open because you’ll need to copy the widget embed code later on.
- If you chose the “Standard” or “Sidebar” style above follow the Standard/Sidebar style instructions.
- If you chose the “Embed inline” style above follow the Embed inline style instructions.
Standard/Sidebar style install steps
By following these steps, you will be basically adding a <script> tag to the <head> of your site and a custom <chatlio-widget> element to the footer of your site. If you run into any trouble here, Webflow has some good documentation on how to add embed code to your site that you can reference. With that being said, here is how to do it:
-
On the Widget Install tab of the Chatlio dashboard, select “HTML” for your application type and then copy the widget embed code script tag.
-
Now login to Webflow.
-
Open your site in Webflow.
-
Select the settings icon to “Open page settings”.
-
Scroll down to the bottom to the “Custom Code” section and paste the previously copied script tag into the “Head code” section
-
Save your changes.
-
Keep your site open in Webflow and go back to the Chatlio dashboard and copy the
<chatlio-widget>embed code.
-
Now back in Webflow go back to the “Custom code” section and paste your
<chatlio-widget>embed code into the “Footer code” section. -
Save your changes.
-
You should now see the closed Chatlio widget in the bottom right of your site. You may need to publish your site first to see the widget.
Embed inline style install steps
By following these steps, you will be basically adding a <script> tag to the <head> of your site and a custom <chatlio-widget> element and container <div> to a Webflow Embed Element where you want to embed the widget. If you run into any trouble here, Webflow has a nice video on how to embed the Chatlio widget on to a page that you can reference. With that being said, here is how to do it:
-
On the Widget Install tab of the Chatlio dashboard, select “HTML” for your application type and then copy the widget embed code script tag.
-
Now login to Webflow.
-
Open your site in Webflow.
-
Select the settings icon to “Open page settings”.
-
Scroll down to the bottom to the “Custom Code” section and paste the previously copied script tag into the “Head code” section
-
Save your changes.
-
Keep your site open in Webflow and go back to the Chatlio dashboard Widget Install tab and copy the embed code in step 4 (make sure “Embed inline” is still selected on step 1).
-
Now back in Webflow drag and drop an Embed Element on to the page where you want to embed the Chatlio widget.
-
Paste in your Chatlio embed code into to the new Embed Element.
-
Adjust the “height” and “width” values in the embed code div element,
<div id="chatlioWidgetPlaceholder" style="margin: auto; height: 400px; width: 400px;"></div>, so it will fit into your Webflow Embed Element. If you want the Chatlio widget to fill in the entire the space of your Webflow Embed Element, change the height and width to100%(e.g.<div id="chatlioWidgetPlaceholder" style="margin: auto; height: 100%; width: 100%;"></div>). -
You should see the embedded Chatlio chat widget on your page. You may need to publish your site first to see the widget.