# Web Embed Component

**URL:** https://community.glideapps.com/t/web-embed-component/54463
**Category:** Ask for Help
**Created:** [November 18, 2022, 8:15pm UTC](https://community.glideapps.com/t/web-embed-component/54463 "2022-11-18T20:15:28Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 8:15pm UTC](https://community.glideapps.com/t/web-embed-component/54463/1 "2022-11-18T20:15:28Z")

</div>

Unfortunately will not allow me to add a script ☹

I was hoping to embed my HubSpot chat into my page - is there any other way to do this?

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 8:21pm UTC](https://community.glideapps.com/t/web-embed-component/54463/2 "2022-11-18T20:21:34Z")

</div>

There is a bit of a trick to that.

This is something I discovered and initially implemented in my own app:

> [@Instagram and glide combined](https://community.glideapps.com/t/instagram-and-glide-combined/50772/6):
>
> That has javascript, so it won’t work with a rich text component. However, I did figure out a trick that seems to work. A Add a new text column in your table. Name it “embed” or something like that. Temporarily add a file picker component and point it to that new column. Take that embed code and paste it into notepad or some other basic text editor. Save the file as embed.html or something like that. Use the file picker to upload that html file to the glide database. Now add a web embed co…

But after some discussion with a couple of other experts, instead of uploading an html document, you could simply create a template column to hold your embed code, and a simple javascript column where you pass in your embed code, and return a URI that you can place in a web embed.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/21da00f30d6dfa5ed160336e6661f1e7b5af08ec.png)

```auto
return `data:text/html;charset=utf-8,${encodeURIComponent(p1)}`;

```

---

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 8:36pm UTC](https://community.glideapps.com/t/web-embed-component/54463/3 "2022-11-18T20:36:18Z")

</div>

Thanks! Not sure I 100% sure I follow this however!

Will take a bit of figuring out! Would you be so kind as to give me a bit more details, I’m still new to glide and JavaScript, this is the code I’m trying to use:

```auto
<!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/xxxxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->

```

How do I set this up exactly? Thanks!

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 8:47pm UTC](https://community.glideapps.com/t/web-embed-component/54463/4 "2022-11-18T20:47:39Z")

</div>

Create a text column and place your code in that column cell, OR create a template column and put that code in as the template value. The goal is to get your code into one or many cells within your table.

Then create a javascript column and put in the code that I included in my previous post. Set the replacement value for p1 to point to the column that contains YOUR code.

That should be it. Point the web embed component to that javascript column and hopefully it should work.

In theory, it should work. I’m not getting anything to show up with the code you shared, and I’m not sure if I should, but that should be all you need.

---

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 8:47pm UTC](https://community.glideapps.com/t/web-embed-component/54463/5 "2022-11-18T20:47:51Z")

</div>

This is what I have but doesn’t seem to be working:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b9a207174c896ecaf171c33b47630860e91064ef.png)

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 8:49pm UTC](https://community.glideapps.com/t/web-embed-component/54463/6 "2022-11-18T20:49:06Z")

</div>

That should be it. It’s creating the value you need to use in your web embed.

---

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 8:51pm UTC](https://community.glideapps.com/t/web-embed-component/54463/7 "2022-11-18T20:51:00Z")

</div>

I wonder where I’m doing wrong! Ok well I’m on the right track at least!

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 8:52pm UTC](https://community.glideapps.com/t/web-embed-component/54463/8 "2022-11-18T20:52:43Z")

</div>

What do you think is wrong? What are you expecting to happen?

---

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 8:57pm UTC](https://community.glideapps.com/t/web-embed-component/54463/9 "2022-11-18T20:57:25Z")

</div>

Well my little floating chat div should appear!

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 9:17pm UTC](https://community.glideapps.com/t/web-embed-component/54463/10 "2022-11-18T21:17:06Z")

</div>

Are you using the correct code? What you shared is just a script with no HTML elements. Based on a quick google search it seems to me that the code you shared is just for tracking. Is that truly for the chat div?

I guess I really don’t know. I’m just guessing, but it seems like you are missing something in your code. I’m not familiar with hubspot, so I can’t help much there.

It’s also possible that there is some sandboxing going on. Usually javascript and web embeds are sandboxed from the rest of the app, so I don’t know if it’s preventing something from working or not. With what I implemented in my app, I basically created an html document, but there is javascript inside of that html that I know does run, so I feel like it should be possible. I really don’t know how a floating chat would work though.

---

<div class="post-metadata">

### Author: ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)
#### Post date: [November 18, 2022, 9:43pm UTC](https://community.glideapps.com/t/web-embed-component/54463/11 "2022-11-18T21:43:41Z")

</div>

I think there something blocking it, I really need to add the code into the footer or header of the site. It’s working fine on my WordPress site.

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 18, 2022, 11:03pm UTC](https://community.glideapps.com/t/web-embed-component/54463/12 "2022-11-18T23:03:59Z")

</div>

I’m not sure. Maybe it’s not possible in this case.

---

<div class="post-metadata">

### Author: ![Roch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roch/32/68454_2.png) [@Roch](https://community.glideapps.com/u/Roch)
#### Post date: [March 8, 2024, 11:21am UTC](https://community.glideapps.com/t/web-embed-component/54463/13 "2024-03-08T11:21:49Z")

</div>

did you manage to get this to work ?

---

<div class="post-metadata">

### Author: ![Collin\_Stedham](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@Collin\_Stedham](https://community.glideapps.com/u/Collin_Stedham)
#### Post date: [March 9, 2024, 1:31am UTC](https://community.glideapps.com/t/web-embed-component/54463/14 "2024-03-09T01:31:06Z")

</div>

Couldn’t you just embed it somewhere else that supports that and then add it into Glide? You could also make a data url, but that might not be reliable or work for other people.

---

<div class="post-metadata">

### Author: ![Hugh\_D](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hugh_d/32/66261_2.png) [@Hugh\_D](https://community.glideapps.com/u/Hugh_D)
#### Post date: [June 11, 2024, 8:32pm UTC](https://community.glideapps.com/t/web-embed-component/54463/15 "2024-06-11T20:32:58Z")

</div>

Just created a feature request based on this: [HubSpot Chat](https://community.glideapps.com/t/hubspot-chat/74056)
