# Unable to view embed HTML on published page (working fine in editor and preview)

**URL:** <https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888>\
**Category:** Ask us anything\
**Created:** [October 13, 2023, 2:46pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888 "2023-10-13T14:46:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 13, 2023, 2:46pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/1 "2023-10-13T14:46:20Z")

</div>

Hi there,

I’m having trouble viewing my two embedded HTML on published page (working fine in editor and preview). One (most importantly) is my Thrivecart checkout block. The other is a countdown timer (less important). Here are a few details:

Website:  
freelancefreedom.ca

HTML:

Screenshot on preview:

 ![Screen Shot 2023-10-13 at 8.48.56 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9aa72c34db9a0f9d86de8b0d0445df3f4b9bdd3d.png)

When I inspect I see the following error:  
VM11155 thrivecart.js:1 [iFrameSizer][Host page: tc-bordeleau-1-7FADNN-iframe] [Tab Visable] IFrame(tc-bordeleau-1-7FADNN-iframe) not found

Thanks!  
Carissa

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 13, 2023, 6:09pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/2 "2023-10-13T18:09:46Z")

</div>

Seems like you’re embeding some javascript also? Could you send the embed code you’re using?

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 13, 2023, 6:24pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/3 "2023-10-13T18:24:29Z")

</div>

Sorry, I thought I included it above. The HTML is:

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 13, 2023, 6:27pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/4 "2023-10-13T18:27:22Z")

</div>

Okay, I’m new to this - it keeps disappearing! Here’s the screenshot.

 ![Screen Shot 2023-10-13 at 3.27.13 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/899d7078204f9c75d5d3a05ab1f06b782723a4cf.png)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 13, 2023, 6:32pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/5 "2023-10-13T18:32:12Z")

</div>

remove the

`<script src="https://tinder.thrivecart.com/embed/v2/thrivecart.js" id="tc-bordeleau-1-7FADNN"></script>`

and paste this:

```auto
  if(!window["scp-loading-948e6332-d9cc-4492-ae7d-9fa88d05291a"]) {
    window["scp-loading-948e6332-d9cc-4492-ae7d-9fa88d05291a"] = true;
    let doc;
    /* Adding script from https://tinder.thrivecart.com/embed/v2/thrivecart.js */
    doc = document.createElement('script');
    doc.src = 'https://tinder.thrivecart.com/embed/v2/thrivecart.js';
    document.body.appendChild(doc);
  }

```

into a on page load workflow.

Check out @raydeck’s video

> **[Statechange Weweb Embedder Tutorial - Descript](https://share.descript.com/view/7IGO5qbLh9q)**
>
>  
> Give Weweb Superpowers
> Weweb as great. It gives you all sorts of power to do things with existing components and workflows and all sorts of stuff. But sometimes there's functionality that we want to

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 13, 2023, 7:02pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/6 "2023-10-13T19:02:28Z")

</div>

Awesome! That worked! Thank you so much @Broberto! I’ll try the same approach for the countdown timer.

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 17, 2023, 2:27am UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/7 "2023-10-17T02:27:14Z")

</div>

Hey @Broberto, my checkout embed stopped working and I’m not sure why. I thought it may have been because of the ID that had changed upon updating the product in thrivecart. I believe I’ve updated everything correctly in the steps and have published but it is only showing in the edit/preview mode and not the published page. Here’s a loom to show what I’ve done which should be the same as what you’ve noted above. Please let me know if you spot the issue!

[Loom video](https://www.loom.com/share/937e1421646649fc930eec5507489599)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 17, 2023, 6:19am UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/8 "2023-10-17T06:19:06Z")

</div>

Heyy. Could you check the browser console for errors and send them here?

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 17, 2023, 12:02pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/9 "2023-10-17T12:02:58Z")

</div>

> [@Broberto](#):
>
> check the browser console for errors

I’ve attached a screenshot of the errors.

Also, when I tried going on the website this morning it could not be reached (attached screenshot). I re-published and things were fine again.

Thanks!

 ![Screen Shot 2023-10-17 at 9.01.31 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e5476b856a34c81cf5263df7a7cd121f1cbc3e89.png)  
 ![Screen Shot 2023-10-17 at 8.53.06 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/08b650f2064a42e1c117c649fafdd6879f1e694e.png)

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 17, 2023, 12:04pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/10 "2023-10-17T12:04:49Z")

</div>

Sorry, here’s a screenshot with more details in case those help.

Thank you

 ![Screen Shot 2023-10-17 at 9.04.10 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/124e04ea3856e65ad9a3bda6c6b23c8150f5023b.png)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 17, 2023, 1:49pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/11 "2023-10-17T13:49:30Z")

</div>

It seems like there is some iframe tag missing, I’m not sure what you’re supposed to embed in order to make this work, could you provide some docs?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 17, 2023, 4:21pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/12 "2023-10-17T16:21:10Z")

</div>

It’s probably a problem of timing. The script expects that the element is already in the page but weweb’s html component adds the element dynamically. Sometimes the element is already there when the script loads and executes, sometimes it’s not.

This kind of thing can usually be solved in a nice and clean way by creating a custom component for weweb.

Alternatively you can try to use some code with a mutation observer.  
A very basic code would be

```auto
const doc = wwLib.getFrontDocument();
const win = wwLib.getFrontWindow();
const selector = ".tc-v2-embeddable-target";
function load() {
	const script = doc.createElement("script");
	script.src = "https://tinder.thrivecart.com/embed/v2/thrivecart.js";
	doc.body.appendChild(script);
}
function start() {
	if (doc.querySelector(selector)) {
		load();
	} else {
		const observer = new MutationObserver((mutationList, observer) => {
			if (doc.querySelector(selector)) {
				load();
				observer.disconnect();
			}
		});
		observer.observe(doc.body, {
			childList: true,
			attributes: true,
			attributeFilter: ["class"],
		});
	}
}
if (doc.readyState === "loading") {
	win.addEventListener("DOMContentLoaded", start);
} else {
	start();
}

```

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 17, 2023, 4:57pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/13 "2023-10-17T16:57:25Z")

</div>

Ther is also a third option in this case:

- add a weweb’s div element (or any container)

- add the class and attributes that you need for the script to work  

- inside the div add a html element with just the script `<script src="https://tinder.thrivecart.com/embed/v2/thrivecart.js"></script>`  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e75caa85d3acb1a240a333b1a56f9034f1a77819.png)

The script now is a child of the target element and should be loaded only when the element is present in the page.

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 26, 2023, 1:32pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/14 "2023-10-26T13:32:49Z")

</div>

Hi @dorilama and @Broberto,  
Thank you so much for taking the time to try and help me with this. I was able to test out the second and third option with no luck.

When I pasted in the first option (custom code for the timing issue) into the custom code header of the page it gave a “validation error” and the published page didn’t show the thrivecart embed.

When I tried the third option, the published page didn’t show the thrivecart embed either.

Here’s a loom video quickly showing all three suggestions completed (I tried them individually as well): [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/9bb3e82224814364a5b2b660418f831e)

I’d love to be able to launch this next week. Please let me know if there’s anything I’m missing or any other suggestions.

Thanks,  
Carissa

---

<div class="post-metadata">

**Author:** ![Carissa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/carissa/32/5484_2.png) [@Carissa](https://community.weweb.io/u/Carissa)\
**Post date:** [October 26, 2023, 1:48pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/15 "2023-10-26T13:48:23Z")

</div>

Here’s a screenshot of the console errors in case it helps.

 ![Screen Shot 2023-10-26 at 10.46.51 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8072d3a39095391b6ad96982b3d305e7269266d1.png)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 26, 2023, 2:08pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/16 "2023-10-26T14:08:28Z")

</div>

The validation error is a weweb problem (as long as you wrapped the code inside `<scritp></script>`), the editor doesn’t like multiline scripts even if they are valid javascript. You can also use the code in a javascript action on page load workflow.  
In both methods the class and data attributes of the target element need to be correct, this may be the reason why it doesn’t work.  
 ![chrome_olFI6PslBy](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/acfada6849065d34b91446d0e50602b75df71c00.gif)

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [November 2, 2023, 1:58pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/17 "2023-11-02T13:58:00Z")

</div>

Hi @Carissa

I copy/pasted your embed in my project and it works fine even in the published website. I had to toggle off “refresh on resize” though, else it disappeared when the iframe was resized. See the result on my test project =\> [Blank | Start from scratch](https://7fcc5550-d27c-4200-9621-7b2b966a871b-staging.weweb-preview.io/release/)

Could you try to embed it like you did at first ?

---

<div class="post-metadata">

**Author:** ![Ceilidh.m](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@Ceilidh.m](https://community.weweb.io/u/Ceilidh.m)\
**Post date:** [November 6, 2023, 5:46pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/18 "2023-11-06T17:46:07Z")

</div>

Hi @Alexis, I’m part of the Bordeleau Team and we turned off the toggle “refresh on resize” and unfortunately it isn’t showing on the published end for us. We did the embed HTML and added the custom javascript. Do you happen to know if there is something else we can do?

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [November 6, 2023, 5:52pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/19 "2023-11-06T17:52:42Z")

</div>

Could you try to remove your javascript ? I didn’t have to include any javascript on my side.

I used =\>

```auto
<div class="tc-v2-embeddable-target" data-thrivecart-account="bordeleau" data-thrivecart-tpl="v2" data-thrivecart-product="1" data-thrivecart-embeddable="tc-bordeleau-1-T343WJ"></div><script async src="//tinder.thrivecart.com/embed/v2/thrivecart.js" id="tc-bordeleau-1-T343WJ"></script>

```

Inside my HTML element, that’s all.

---

<div class="post-metadata">

**Author:** ![Ceilidh.m](https://avatars.discourse-cdn.com/v4/letter/c/e47774/32.png) [@Ceilidh.m](https://community.weweb.io/u/Ceilidh.m)\
**Post date:** [November 6, 2023, 7:41pm UTC](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888/20 "2023-11-06T19:41:08Z")

</div>

@Alexis I tried this embed with the updated product ID that we are using and it still isn’t showing up on the front end. I put this in and disabled the javascript:

 ![Screenshot 2023-11-06 at 2.49.31 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f0c6d42fdc6c7b57c0b88872d8ee34dacbd866ae.png)

[Next page](https://community.weweb.io/t/unable-to-view-embed-html-on-published-page-working-fine-in-editor-and-preview/4888.md?page=2)
