Trigger Chatbot Actions Based on Website Pages | AI Tutorial

Learn how to trigger different chatbot actions based on the specific web page a user is on. This AI tutorial covers setting up a custom chatbot flow and integrating it seamlessly with your website.

October 6, 2024

party-gif

Discover how to create dynamic chatbot flows that adapt to the user's location on your website, ensuring a personalized and engaging experience. This tutorial provides a step-by-step guide to setting up different chatbot actions based on the visitor's web page, helping you optimize your chatbot's performance and drive better customer interactions.

Different Chatbot Flows Based on Web Page

To trigger different chatbot flows based on the web page the user is on, follow these steps:

  1. Create a new flow for the pricing page by clicking "Add pricing page flow" in the chatbot builder.
  2. In the new flow, add a "Hello" message with a GIF that says "Cash Money" and a 4-second typing animation.
  3. Follow this message with a text message that says "Please let us know if you have any questions about our pricing."
  4. Publish the new flow and copy the published link.
  5. In your website's code (e.g., Webflow), locate the existing web chat code and replace the ref parameter with the one from the published link.
  6. Save and publish the changes to your website.

Now, when a user visits the pricing page, they will see the new chatbot flow with the "Cash Money" GIF and the pricing-related message.

Creating a Pricing Page Chatbot Flow

To create a chatbot flow for the pricing page, follow these steps:

  1. Log into your account and click "Add pricing page flow".
  2. Create a simple "Hello" message with a GIF that says "Cash Money" and a 4-second typing animation.
  3. Add a text message that says "Please let us know if you have any questions about our pricing."
  4. Publish the flow and copy the published link.
  5. In your website's code (e.g., Webflow), locate the web chat section and replace the reference number with the one from the published flow.
  6. Save and publish the changes.

Now, when users visit the pricing page, they will see the chatbot bubble with the customized message and GIF, allowing them to easily ask questions about the pricing.

Integrating the Pricing Page Chatbot Flow

To integrate the chatbot flow for the pricing page, follow these steps:

  1. Log into your account and click "Add pricing page flow" to create a new flow for the pricing page.
  2. In the flow, add a "Hello" message with a GIF that says "Cash Money" and a 4-second typing animation.
  3. Add a text message that says "Please let us know if you have any questions about our pricing."
  4. Publish the flow and copy the published link.
  5. In your Webflow project, go to the web chat settings and paste the published link as the entry point for the pricing page.
  6. Update the text animation and message as desired, then save and publish the changes.

Now, when users visit the pricing page, they will see the chatbot flow you've created, allowing them to easily ask questions about your pricing.

Conclusion

In this tutorial, we have learned how to trigger different chatbot flows based on the web page the user is on. We started by creating a simple flow for the pricing page, which includes a GIF animation and a message asking the user to let us know if they have any questions about the pricing.

We then integrated the chatbot flow into the pricing page by copying the published link and updating the web chat code in Webflow. This allowed us to seamlessly integrate the chatbot functionality into the pricing page, providing a personalized and engaging experience for the users.

The key takeaways from this tutorial are:

  1. Creating a specific flow for the pricing page to provide a tailored experience for users.
  2. Utilizing GIFs and animations to make the chatbot more engaging and interactive.
  3. Integrating the chatbot flow into the pricing page by updating the web chat code in Webflow.

By following these steps, you can easily implement similar functionality on your own website, allowing you to provide a more personalized and responsive experience for your users.

FAQ