How To Add A Chatbot To Webflow
Tags: chatbot, webflow, javascript, beginners
Published: 2023-01-31 13:31:37

<!-- wp:paragraph -->
<p>Webflow is a cloud-based CMS that helps to build great websites. Webflow allows users to design, build and host a website with simple and easy steps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this blog, we are building a website and adding a chatbot so that website visitors can take help from the chatbot to understand the product.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sign up on Webflow CMS and design your website. Once you finish designing, follow the given steps to add the Kommunicate chat widget to your website.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Log into your Webflow account and open your site in design mode.<br></li></ol>
<!-- /wp:list -->

<!-- wp:image {"id":13110,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot1-1024x565.png" alt="Webflow dashboard" class="wp-image-13110"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>2. Click on the alphabet <em><strong>W </strong>icon present in the top left corner of the design window.</em></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":13111,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot2-1024x583.png" alt="Desgin Window" class="wp-image-13111"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>3. Under <em><strong>Project Settings</strong></em>, you will see the <em><strong>Custom Code</strong></em> feature, visit the section and check for the <em><strong>Footer code option.</strong></em></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":13113,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot3-1024x540.png" alt="custom code" class="wp-image-13113"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>4. Visit the<em><strong> Footer code</strong></em> option and add the Kommunicate <a href="https://dashboard.kommunicate.io/settings/install" target="_blank" rel="noreferrer noopener">Install script</a> inside the code section as shown below and click on <em><strong>Save Changes.</strong></em></p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">NOTE: You will have to select the Kompose chatbot from the RULES section of the Kommunicate dashboard to handle all the incoming conversation so that chatbot will handle the new conversations.</pre>
<!-- /wp:preformatted -->

<!-- wp:image {"id":13114,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot4-1-1024x537.png" alt="footer code" class="wp-image-13114"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>5. Now, go and Publish your site using the <em><strong>Publish</strong></em> option given on the top right corner of the page.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":13115,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot5-1024x490.png" alt="Add Custom HTML &amp; Css" class="wp-image-13115"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>6. Chat widget is added successfully</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":13116,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot6-1024x567.png" alt="Chat Widget of kommunicate" class="wp-image-13116"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":13117,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2023/01/Chatbot7-1024x561.png" alt="Chatbot of Kommunicate" class="wp-image-13117"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, your website users can use the chat option to get a help about your product and all these chats can be monitored from the Kommunicate dashboard, also support agents can involve in handling chats when chatbot is unable to answer.</p>
<!-- /wp:paragraph -->

Originally Published [Here](https://www.kommunicate.io/blog/add-a-chatbot-to-webflow/)