How to Embed a Google Map in your Website AI Assistant
This tutorial explains how to embed a google map (or any Iframe) into your Voiceflow Web Assistant! This method can be used for rendering any IFrames in your Voiceflow Webchat assistant.
IMPORTANT NOTE
Ensure that you use your own code when embedding IFrames. We've added additional security measures to prevent vulnerabilities like cross-site scripting, but its important for you to know what you're rendering on your webchat.
To enable IFrames on your web assistant - follow the instructions on your documentation here: https://developer.voiceflow.com/docs/...
Relevant links are below:
1. Google Map Places API: https://developers.google.com/maps/do...
2. Google Map Embed API: https://developers.google.com/maps/do...
Timestamps
00:00 🌐 Introduction to embedding Google Maps in Voiceflow
01:09 🧰 How to embed an IFrame
03:01 📦 Accessing Google Maps APIs
05:05 🗝️ Setting up API requests
08:06 🖇️ Capturing and using API responses
09:57 🌐 Creating and modifying the Google Maps URL
13:11 🧪 Testing and debugging the integration
15:03 🧩 Enabling iframe rendering in web chat
16:58 🚀 Final thoughts and next steps
***
The collaborative platform to build AI agents. Use Voiceflow to design, test, and launch chat or voice AI agents — together, faster, at scale.
Join our Discord community
👾 / discord
Kickstart your next project with our templates
🚀 https://www.voiceflow.com/templates
Our Links 🔗
👉 Start building today: https://www.voiceflow.com
👉 Subscribe: https://bit.ly/3am22nf
👉 Twitter: https://bit.ly/2xrXZqV
👉 LinkedIn: / voiceflowhq
👉 Publication: https://www.voiceflow.com/blog