Issues embedding thinkific widget

Developing with Prismic
,
1

Hello All,

We are using prismic with GraphQl and next.js, and we have a requirement to embed thinkific sales widget.

The code we got is this

<div class="thinkific-product-card" data-btn-txt="Certify me" data-btn-txt-color="#ffffff" data-btn-bg-color="#179473" data-card-type="card" data-link-type="checkout" data-product="1740338" data-embed-version="0.0.2" data-card-txt-color="#7d7d7d" data-card-bg-color="#ffffff" data-store-url="[https://training.--.ai/embeds/products/show"](https://training.--.ai/embeds/products/show%22)<div> class="iframe-container"></div><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"](https://assets.thinkific.com/js/embeds/product-cards-client.min.js%22)</script>');</script><noscript><a> href="https://training.--.ai/enroll/1740338?et=paid%22 target="_blank">Certify me</a></noscript></div>

We created a code slice on prismic and tried to set it on the HTML using

 <div
                      key={index}
                      dangerouslySetInnerHTML={{
                        __html: `${section.primary.quote.richText[0].text}`,
                      }}
                    ></div>

But this widget is not being rendered. On inspect element I see the div is created, but the script doesnt run.

Any guidance on this?

3

Hey @manish, thanks for reaching out.
It seems like the correct field is not being rendered. Rich text fields only need to be called by their ID. Let's review the following data:

  • Can you show us the complete query?
  • What's the API ID of the field, and where is it located, in a Group field or a Slice?