Stino12547
Stino12547•15mo ago

Buttons with URL do not work on site but do work on viocelflow

Hey, I'm testing my chatbot on a demo site, but the push buttons that lead to a link from a site don't work on the demo site. They do work in vioceflow. How is this possible? this is the code I use for the button that points to a site. And again this works in vioceflow but not on the site.
1 Reply
Tico | Voiceflow Assistant
Tico | Voiceflow Assistant•15mo ago
The Voiceflow platform allows you to create interactive and engaging experiences for your users. You can customize the appearance and behavior of your chat widget, including rendering proactive message bubbles when a user reaches a specific page on your website. Here's an example of how you can do this: 
window.voiceflow.chat.load().then(() => {
  if (window.location.href.includes('https://store.com/products/firesneakers')) {
    window.voiceflow.chat.proactive.clear(); // Clear previous messages
    window.voiceflow.chat.proactive.push({
      type: 'text',
      payload: { message: 'Are you interested in some sneakers?' }
    });
    window.voiceflow.chat.proactive.push({
      type: 'text',
      payload: { message: 'Click on the chat to learn more' }
    });
  }
});
window.voiceflow.chat.load().then(() => {
  if (window.location.href.includes('https://store.com/products/firesneakers')) {
    window.voiceflow.chat.proactive.clear(); // Clear previous messages
    window.voiceflow.chat.proactive.push({
      type: 'text',
      payload: { message: 'Are you interested in some sneakers?' }
    });
    window.voiceflow.chat.proactive.push({
      type: 'text',
      payload: { message: 'Click on the chat to learn more' }
    });
  }
});
In addition to text messages, you can also render clickable buttons using the Voiceflow UI client or the react-chat library. When a choice trace is received, it is rendered as clickable buttons. Here's an example: 
type: 'choice',
payload: {
  buttons: [
    { name: 'Button A', request: { type: 'eventA', payload: { label: 'example' } } },
    { name: 'Button B', request: { type: 'eventB', payload: { label: 'another-example' } } }
  ]
}
type: 'choice',
payload: {
  buttons: [
    { name: 'Button A', request: { type: 'eventA', payload: { label: 'example' } } },
    { name: 'Button B', request: { type: 'eventB', payload: { label: 'another-example' } } }
  ]
}
Clicking on these buttons sends a request payload to the general-runtime. You can define the behavior of these buttons using the next command. For more detailed information, you can refer to the following links: - Embed and Customize Styling - Advanced Webchat These resources should help you understand how to customize your chat widget and handle button events in Voiceflow.

Did you find this page helpful?