We are working on integrating an automated chatbot feature into our product and order pages using Tawk.to. The goal is to trigger personalized messages based on the product being viewed or the order details on the page and fetch the details from the webpage user is viewing. Below is a breakdown of the requirements and approach we’ve explored so far:
Objective:
We need to automatically trigger the chatbot after a set delay (0 or 10 seconds) on the product detail page, fetching relevant product information to personalize the message. Similarly, we want to display order details for users on the order page.
Product Page:
When a user is viewing a product, we want the chatbot to open automatically and display one of the following messages:
“Hey, I see you’re checking out the ${productName}. We have these in stock and can ship today! If you have any questions, please let me know. The ${productName} is one of our staff favorites!”
“I see you’re looking at the ${productName}. Do you have any questions I can help with? These are in stock and ready to ship. Do you have a need-by date for this?”
“Hey, I see you’re looking at the ${productName}. We have these in stock, but we’re actually down to just one piece left. How many were you interested in ordering?”
We intend to dynamically fetch the product name and other relevant information from the product page.
Order Page:
For users viewing their order details, the chatbot should send a message like:
"Can you confirm I have pulled up the right order for you? It looks like you’re referring to:
Order Key: XXXX-XXXX-XXXX
Order Date**: XX/XX/XXXX
[Order Receipt: Click Here to View]
We need to fetch these details dynamically from the order page as well.
Approach we tried:
We initially explored using JavaScript APIs such as onLoad and onStatusChange from the Tawk.to JavaScript API. However, we encountered limitations where the message could not be sent to the user as expected.
Please provide me solutions to implement the above functionality