Thinkific product embed breaks Cornerstone

Support
#1

Hi there,

I’m trying to enter thinkific.com product code snippets to https://setup.sarahmccrum.com/the-way-of-consciousness/heart-of-healing/

As you can (hopefully) see, the snippets are published correctly, but break cornerstone visual display on the backend: I can still use the wireframe editor, but visual editor renders a blank grey page.

Any ideas?
Snippet example:

Find out more

Kind regards,
c

#2

As you can see above, the snippet code renders as link in the forum… :laughing:

#3

Hi There,

The text contains a <script> will not work correctly in the text element.

Please setup a child theme:

Then add the following code under functions.php file locates in your child theme:

add_action( 'wp_head', 'print_custom_script', 999 );
function print_custom_script(){
	?>
	<script type="text/javascript">document.getElementById("thinkific-product-embed") || document.write('<script id="thinkific-product-embed" type="text/javascript" src="https://assets.thinkific.com/js/embeds/product-cards-client.min.js"><\/script>');</script>
<noscript><a href="https://courses.sarahmccrum.com/courses/healing-2" target="_blank">Find out more</a></noscript></div>
	<?php
}

After that add this HTML code to the text element:

<div class="thinkific-product-card" data-btn-txt="Find out more" data-btn-txt-color="#ffffff" data-btn-bg-color="#db3269" data-card-type="card" data-link-type="landing_page" data-product="203592" data-embed-version="0.0.2" data-card-txt-color="#434343" data-card-bg-color="#ffffff" data-store-url="https://courses.thinkific.com/embeds/products/show"><div class="iframe-container"></div>

Hope it helps :slight_smile:

#4

Thanks!
Before I do all that, let me make sure it will have the desired result:
a) I will have to add a lot of those product widgets to a lot of different pages on this site, not just on the one mentioned.
b) The widgets need to look like they do right now. I do not want a X-Styled button linking to the thinkific sales page

Can you confirm that the code you provided does that?

Kind regards,
c

#5

Hi There,

Could you please provide another emebed code so we can take a closer look?

It should look like as they do right now because they’re using the different style.

Regards!

#6

Widget 1

Find out more

Widget 2

Find out more

Widget 3:

Find out more

Thanks!

#7

Hello @princias,

Thanks for updating in!

The easiest way to add the product code snippets is by utilizing the classic raw content element which you are already using. The snippet might not be visible in the preview because most of the time, Cornerstone will prevent any <script> to be rendered to avoid any issues which may broke Cornerstone.

Any button in the product snippet has been styled by Thinkerific. You can not override the styling because the display is serve as an iframe thus coming in from a 3rd party site.

Hope this helps.

#8

Hi,
I’m not trying to change the styling, I’m trying to use the code snippets as they are, but preferably without breaking the visual editor in cornerstone. Currently, they do that. And I think that issue sits with X, not thinkific or me. It’s a simple iframe, that works with every other WP theme we’ve been using.

Kind regards,
c

#9

Hello @princias,

Thanks for updating in!

Please bear in mind that you are not loading a very simply iframe. A simply iframe is this:

<iframe src="URL"></iframe>

Your script tries to load a frame inside a div tag using the script which is why it breaks the editor every time you add it even in a raw content element. So I have taken the liberty of modifying the given snippet so that it will work out inside Cornerstone editor.

Please use this snippet code inside a raw content element instead:

<h3 class="mts mbm">Widget 1:</h3>
<div class="thinkific-product-card" data-btn-txt="Find out more" data-btn-txt-color="#ffffff" data-btn-bg-color="#db3269" data-card-type="card" data-link-type="landing_page" data-product="164845" data-embed-version="0.0.2" data-card-txt-color="#434343" data-card-bg-color="#ffffff" data-store-url="https://courses.thinkific.com/embeds/products/show">
  <div class="iframe-container"></div>
  <script class="thinkific-product-embed" type="text/javascript" src="https://assets.thinkific.com/js/embeds/product-cards-client.min.js"></script>
  <noscript><a href="https://courses.sarahmccrum.com/courses/the-energy-of-health" target="_blank">Find out more</a></noscript>
</div>

<h3 class="mts mbm">Widget 2:</h3>
<div class="thinkific-product-card" data-btn-txt="Find out more" data-btn-txt-color="#ffffff" data-btn-bg-color="#db3269" data-card-type="card" data-link-type="landing_page" data-product="203592" data-embed-version="0.0.2" data-card-txt-color="#434343" data-card-bg-color="#ffffff" data-store-url="https://courses.thinkific.com/embeds/products/show">
  <div class="iframe-container"></div>
  <script class="thinkific-product-embed" type="text/javascript" src="https://assets.thinkific.com/js/embeds/product-cards-client.min.js"></script>
  <noscript><a href="https://courses.sarahmccrum.com/courses/healing-2" target="_blank">Find out more</a></noscript>
</div>

<h3 class="mts mbm">Widget 3:</h3>
<div class="thinkific-product-card" data-btn-txt="Find out more" data-btn-txt-color="#ffffff" data-btn-bg-color="#db3269" data-card-type="card" data-link-type="landing_page" data-product="4661" data-embed-version="0.0.2" data-card-txt-color="#434343" data-card-bg-color="#ffffff" data-store-url="https://courses.thinkific.com/embeds/products/show">
  <div class="iframe-container"></div>
  <script class="thinkific-product-embed" type="text/javascript" src="https://assets.thinkific.com/js/embeds/product-cards-client.min.js"></script>
  <noscript><a href="https://courses.sarahmccrum.com/courses/relaxation-library" target="_blank">Find out more</a></noscript>
</div>

Hope this helps. Please let us know how it goes.

#10

Thank you, RueNel, much appreciated!

It’s not really sustainable to have everyone adapt code snippets according to your template, so we’ll be replacing them by using a button with a direct link to each respective sales page. Sorry about the time spent, I was hoping for a straightforward fix.

I have noticed that X appears more sensitive than I’m used to – both to iframe code snippets from several sources, as well as to Ontraport plugins…anything external using javascript seems to be the common thread. It’s not a dealbreaker for me, just thought it might be worth mentioning.

Kind regards, and Happy New Year!
c

#11

Hi,

Please note that not all Javascript functions are the same. For example for essential grid plugin we don’t display the preview in the builder as they contain script that conflicts with the builder which is also powered by Javascript.

Kindly refer to the link below for more info.

Thanks

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.