# Chatflow embedded through iframe

**URL:** <https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415>\
**Category:** APIs & Integrations\
**Tags:** developer-tools, professional\
**Created:** [July 28, 2021, 12:32pm UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415 "2021-07-28T12:32:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [July 28, 2021, 12:32pm UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415/1 "2021-07-28T12:32:53Z")

</div>

Hi all,  
I’m trying to get the chatflow embedded on a landing page using an iframe, which I’ve managed to get to partially work using the below code:

`<div style="width: 600x; height: 530px;"><div class="shadow"></div><iframe src="https://app.hubspot.com/conversations-visitor/2847527/threads/utk/2d64ca96e67045ada23e17022b81e7e3?uuid=b82cd5287a564b76bee4ee7286a6b200&mobile=false&mobileSafari=false&hideWelcomeMessage=false&hstc=216559305.2031e080e10c81345f36bd078f70053a.1627467156034.1627467156034.1627467156034.1&domain=silverbug.it&inApp53=false&messagesUtk=2d64ca96e67045ada23e17022b81e7e3&url=https%3A%2F%2Fwww.silverbug.it%2Fcyber-risk-calculator&inline=false&isFullscreen=false&globalCookieOptOut=no&isFirstVisitorSession=true&isAttachmentDisabled=true&enableWidgetCookieBanner=false&isInCMS=true&hubspotUtk=2031e080e10c81345f36bd078f70053a" width="400" height="600" align="centre" frameborder="0" class="LivePreview__PreviewIFrame-sc-10lc3a6-0 GGqrS"></iframe></div>`

The only problem is, the above code has a fixed UUID “uuid=b82cd5287a564b76bee4ee7286a6b200”  
However, the popup chatflow will dynamically apply a UUID, meaning the only way I can get this to work is by changing the UUID through Inspect by copying it from the popup chatflow iframe which is automatically generated by HubSpot and pasting it into the above code for the iframe.  
The page I am testing this on is linked here: [https://www.silverbug.it/cyber-risk-calculator](https://www.silverbug.it/cyber-risk-calculator)

When you go to the page, the iframe will work perfectly once the UUID is replaced with that in the popup chatbot.  
Is there a way I can get it to either work without a UUID, in the iframe url or by pulling in the correct UUID?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [July 29, 2021, 1:01pm UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415/2 "2021-07-29T13:01:10Z")

</div>

@tjoyce any ideas here?

@SAncliff , what is the reason for doing this?

---

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [August 5, 2021, 7:46am UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415/3 "2021-08-05T07:46:06Z")

</div>

Mostly as a UX feature. We are looking to embed it in a similar way as HubSpot’s own support bot.

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 5, 2021, 5:13pm UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415/4 "2021-08-05T17:13:40Z")

</div>

You can run this js @SAncliff -

```lia-code-sample
let resolved = 0;
window.addEventListener('message', event => {
 let d = (typeof event.data === typeof "") ? JSON.parse(event.data) : event.data;
 if(d.type === 'request-widget' && void 0 !== d.uuid && !resolved) {
 resolved = 1;
 $('#hs_cos_wrapper_widget_1627561115672 iframe').attr('src', $('#hubspot-messages-iframe-container iframe').attr('src'));
 }
});

```

Of course, I hard coded your module id into that script so it would be better to add a class to your target iframe and use that instead, but just dropping this code into the header of your site should work for now.

---

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [August 6, 2021, 7:40am UTC](https://community.hubspot.com/t/chatflow-embedded-through-iframe/41415/5 "2021-08-06T07:40:16Z")

</div>

That’s fantastic. You’re a hero!