unwilling-turquoise
unwilling-turquoise•2y ago

Can I serve IMAGES or GIFs in proactive.push messages?

Hey all, just trying to understand if I can serve images from URLs as proactive messages in Voiceflow. Here's my code snippet: // Delay the second message to be after the first setTimeout(() => { window.voiceflow.chat.proactive.push({ type: 'image', // Assuming 'image' is the type for sending images/GIFs payload: { url: 'https://www.reactiongifs.com/wp-content/uploads/2013/07/ralph-wave.gif' // URL of your GIF } I couldn't find any docs for this, I've read the one on proactive messages but it only gives 'text' as examples. Let me know!
No description
No description
1 Reply
Tico | Voiceflow Assistant
Tico | Voiceflow Assistant•2y ago
Yes, you can serve images or GIFs in proactive messages with Voiceflow. While the example you provided uses a hypothetical 'image' type, the correct approach to include images or GIFs in your proactive messages involves using the 'visual' type in your payload. Here's how you can adjust your code snippet: - Use type: 'visual' instead of type: 'image'. - Within the payload, specify the image URL under a key named image. Here's an adjusted example based on the information: 
setTimeout(() => {
  window.voiceflow.chat.proactive.push({ 
    type: 'visual', // Use 'visual' for images/GIFs
    payload: { 
      image: 'https://www.reactiongifs.com/wp-content/uploads/2013/07/ralph-wave.gif' // URL of your GIF
    }
  });
}, 1000); // Delay after the chat widget has loaded
setTimeout(() => {
  window.voiceflow.chat.proactive.push({ 
    type: 'visual', // Use 'visual' for images/GIFs
    payload: { 
      image: 'https://www.reactiongifs.com/wp-content/uploads/2013/07/ralph-wave.gif' // URL of your GIF
    }
  });
}, 1000); // Delay after the chat widget has loaded
This adjustment aligns with how Voiceflow handles visual content in proactive messages, ensuring that your images or GIFs are correctly displayed within the chat interface. I've reviewed your script, and it seems like you've implemented the proactive messaging feature correctly. However, there are a few key points to ensure everything works as intended: - Make sure the projectID in your script matches the one from your Voiceflow project. It's crucial for the chat widget to connect to the correct project. - The versionID should be set to 'production' unless you're testing a development version of your project. This ensures the chat widget uses the correct version of your project. - The delays you've set for the proactive messages seem appropriate. Adjusting these delays can help in timing your messages better based on user interaction. - Ensure that the script is correctly placed within your HTML document and that there are no JavaScript errors in the console that might be preventing the script from executing. For more detailed guidance on proactive messages and other functionalities of the chat widget, you can refer to our documentation on showing proactive messages and customizing the chat widget.

Did you find this page helpful?