Elastic
Elastic•17mo ago

Load Content into a <div> webpage from Chatbot

Hi all, Is it possible to update a content area on a webpage from a Voiceflow chatbot? Use case: Someone is having a conversation, the bot presents a few options as buttons, one button is to see more information. In this context the button option is call "View content". This button would then load a block on content into a <div> or <iframe> on the same page where the conversation is happening (not in the chat area), without going to some other URL. Is this possible? Screenshot mockup attached. Thanks!
No description
1 Reply
Tico | Voiceflow Assistant
Tico | Voiceflow Assistant•17mo ago
Yes, it is possible to update a content area on a webpage from a Voiceflow chatbot. You can achieve this by using the Web Chat API to interact with your chatbot and then use JavaScript to update your webpage content based on the chatbot's responses. Here's a basic example of how you can do this: 
window.voiceflow.chat.load({
  verify: {
    projectID: "<Your Project ID>"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.on('voiceflow:interact', (event) => {
    const data = JSON.parse(event.data);
    if (data.payload && data.payload.message === 'View content') {
      document.getElementById('<Your Div ID>').innerHTML = '<Your Content>';
    }
  });
});
window.voiceflow.chat.load({
  verify: {
    projectID: "<Your Project ID>"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.on('voiceflow:interact', (event) => {
    const data = JSON.parse(event.data);
    if (data.payload && data.payload.message === 'View content') {
      document.getElementById('<Your Div ID>').innerHTML = '<Your Content>';
    }
  });
});
In this example, we're using the voiceflow:interact event to listen for interactions with the chatbot. When the user clicks the "View content" button, the chatbot sends an interaction event with a message of "View content". We then use JavaScript to update the content of a <div> element with the ID of <Your Div ID>. Please replace <Your Project ID>, <Your Div ID>, and <Your Content> with your actual project ID, the ID of the <div> you want to update, and the content you want to display, respectively. Remember, this is a basic example. Depending on your specific needs, you might need to adjust this code to fit your use case. For instance, you might want to update different <div> elements based on different button clicks, or you might want to display dynamic content based on the state of the conversation. For more information on how to use the Web Chat API, you can refer to the Web Chat API documentation and the Embed & Customize Styling documentation.

Did you find this page helpful?