Menu
Answered

How can I create a sales widget for my additional prices?

We require a sales widget button for paying for the full course and also a sales widget button that pays for the payment plan version of the course. Is there a way to do this?


Best Answer

Unfortunately, the sales widget feature does not allow you to create widgets for your additional prices by default. However, with a bit of code modification, we can make it happen!


Follow these directions to Create Your Widget and copy the snippet. Here's mine:


<div class="thinkific-product-card" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-btn-bg-color="#980000" data-card-type="card" data-link-type="checkout" data-product="152585" data-embed-version="0.0.2" data-card-txt-color="#000000" data-card-bg-color="#fff2cc" data-store-url="https://courses.thinkific.com/embeds/products/show"><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"><\/script>');</script><noscript><a href="https://ashleyyy.thinkific.com/enroll/152585?et=paid" target="_blank">Enroll Now!</a></noscript></div>


There's two places to pay close attention to, the data-product and the link on the Enroll Button. I've bolded these above.


To create a widget for an additional price, we need to capture the price id. We can do this by previewing the landing page and right-clicking on the buy button for the additional price. Select "Copy Link Address"


Here's what I get from that: https://ashleyyy.thinkific.com/cart/add_product/152585?price_id=188645


See the price_id? That's what we want to replace our product id with. So our new snippet looks like this:


<div class="thinkific-product-card" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-btn-bg-color="#980000" data-card-type="card" data-link-type="checkout" data-product="152585?price_id=188645" data-embed-version="0.0.2" data-card-txt-color="#000000" data-card-bg-color="#fff2cc" data-store-url="https://courses.thinkific.com/embeds/products/show"><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"><\/script>');</script><noscript><a href="https://ashleyyy.thinkific.com/enroll/152585?price_id=188645?et=paid" target="_blank">Enroll Now!</a></noscript></div>


And that's the snippet you'll use to generate a sales widget for that price!




Answer

Unfortunately, the sales widget feature does not allow you to create widgets for your additional prices by default. However, with a bit of code modification, we can make it happen!


Follow these directions to Create Your Widget and copy the snippet. Here's mine:


<div class="thinkific-product-card" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-btn-bg-color="#980000" data-card-type="card" data-link-type="checkout" data-product="152585" data-embed-version="0.0.2" data-card-txt-color="#000000" data-card-bg-color="#fff2cc" data-store-url="https://courses.thinkific.com/embeds/products/show"><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"><\/script>');</script><noscript><a href="https://ashleyyy.thinkific.com/enroll/152585?et=paid" target="_blank">Enroll Now!</a></noscript></div>


There's two places to pay close attention to, the data-product and the link on the Enroll Button. I've bolded these above.


To create a widget for an additional price, we need to capture the price id. We can do this by previewing the landing page and right-clicking on the buy button for the additional price. Select "Copy Link Address"


Here's what I get from that: https://ashleyyy.thinkific.com/cart/add_product/152585?price_id=188645


See the price_id? That's what we want to replace our product id with. So our new snippet looks like this:


<div class="thinkific-product-card" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-btn-bg-color="#980000" data-card-type="card" data-link-type="checkout" data-product="152585?price_id=188645" data-embed-version="0.0.2" data-card-txt-color="#000000" data-card-bg-color="#fff2cc" data-store-url="https://courses.thinkific.com/embeds/products/show"><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"><\/script>');</script><noscript><a href="https://ashleyyy.thinkific.com/enroll/152585?price_id=188645?et=paid" target="_blank">Enroll Now!</a></noscript></div>


And that's the snippet you'll use to generate a sales widget for that price!




1 person likes this

Hi where do I paste this: 

<div class="thinkific-product-card" data-btn-txt="Inscripción" data-btn-txt-color="#ffffff" data-btn-bg-color="#1b9eea" data-card-type="button" data-link-type="landing_page" data-product="251908" data-embed-version="0.0.2" data-store-url="https://courses.thinkific.com/embeds/products/show"><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"><\/script>');</script><noscript><a href="https://ginas-school-6c29.thinkific.com/courses/el-mejor-a-o-de-tu-vida" target="_blank">Inscripción</a></noscript></div>



It appear to me when I did the widget thing but sincerely I don´t know what to do with it. 


Hi Gina!


The Sales Widget code that you have is generally designed to be pasted into 'site footer code' of other websites that you might be using such as Wordpress or Weebly. As the Widget contains java code within it, it may not always work to paste directly into HTML.


If you are looking to have a link or button on another page or website, you might take a look at this article as it provides a bit more flexibility to how you might display that link (you can do so as a button, or image)

How to link directly to checkout

Login to post a comment