Adding a chatbot to your Webflow site

Adding a chatbot to your Webflow site

Learn how to add a chatbot and live chat to your Webflow website in a few simple steps.

Webflow is a widely used no-code platform for web design, development and content management. It's easy and intuitive to build with - much like FAQ Bot - and we think together they're a great combo. This site is made with Webflow 😊

Installing FAQ Bot on a Webflow site is straightforward, and gives you a fully integrated chatbot and/or live chat, as well as optional, knowledge base driven help pages (like these ones).

Recap: How to set up an FAQ Bot

Follow the six steps outlined in this article to get started with FAQ Bot. It's quick and easy, no code required!

Adding an FAQ Bot to your Webflow website

Once you've built your chatbot, it's time to deploy it. Here's how:

Step one: get your code

Copy the DIV and Script code lines from the FAQ Bot portal - go to Configuration > Main > Widget Setup.

Step two: open your project in Webflow

Head to the Project Settings area and go to the “Custom Code” tab

Step three: add your code

In the footer section add the code you copied from the FAQ Bot portal into the “before </body> tag” section, and save your changes.

Step four: publish your site

Job done. Easy as that. Changes you make to your bot in the FAQ Bot portal will update to your site whenever you publish changes - no need to call your developers.

Enhanced integration: chatbot action buttons

It's also possible to create buttons on your Webflow site that directly open FAQ Bot and ask it a question or send an event. This can be a great way to provide contextual help or use a conversational form experience to capture leads - all without leaving or cluttering up the page.

Use a call to action at the end of a blog post to start a conversation

How do you make buttons like this in Webflow?

Creating these buttons is easy, although you will need some basic HTML and JavaScript knowledge.

Once you have FAQ Bot running on your Webflow site, add add one of the following code snippets just above the </body> tag (ie the same place you added the FAQ Bot code above):

1. Use this version if you are already using JQuery on your site:

<script>
$(".faqbot-btn").click(function() {
 varquestion = $(this).attr("data-question");
window.faqbot.open();
window.faqbot.askQuestion(question)
})
</script>

2. If you prefer to use vanilla JS use the following code:

<script>
functionaskQuestion(event) {
varquestion = event.target.getAttribute("data-question");
if (window.faqbot) {
  window.faqbot.open();
  window.faqbot.askQuestion(question);
}
}
document.addEventListener('click',function (event) {
 if (event.target.closest('.faqbot-btn')) {
   askQuestion(event);
 }
})
</script>

Now to create a button (or a link) that asks a question, add the “faqbot-btn” custom CSS class to them and a custom attribute “data-question”together with the question text you want to ask, eg:

<a data-question="this is myquestion" href="#" class="faqbot-btn"><div>Ask a question</div></a>

The code above will:

  • look for these buttons/links on the page, and
  • open FAQ Bot and pass the question through when the button is clicked

To make it even easier for content editors, we've added button fields to some CMS Collection items on the sites we manage, so editors just need to add the button label and button question.

Try it out by clicking one of the buttons below: