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

[Carissa]

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:

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

[Broberto]

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

[Carissa]

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

[Carissa]

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

[Broberto]

remove the

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

and paste this:

  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

[Carissa]

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

[Carissa]

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

[Broberto]

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

[Carissa]

@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!

[Carissa]

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

Thank you

[Broberto]

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?

[dorilama]

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

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();
}

[dorilama]

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>
  

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

[Carissa]

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

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

[Carissa]

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

[dorilama]

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.

[Alexis]

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

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

[Ceilidh.m]

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?

[Alexis]

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

I used =>

<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.

[Ceilidh.m]

@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: