Menu
Answered

Is it possible to center the sales widget button when embedding on my own site?

Hello! I'm in the process of adding a course sign-up button to my website and have done so using the following embed code which I generated from the sign-up widget page. My problem is that it's aligned left on my page and I can't get it to align center to match the text. Can anyone please provide a solution?


Best Answer

Hey Kirsty!


You sure can. In the parent <div> tag, you can add CSS to center the text there. Beside class="thinkific-product-card" add style="text-align:center;"


Here's an example:

  

<div class="thinkific-product-card" style="text-align:center;" data-btn-bg-color="#1c4587" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-card-type="button" data-embed-version="0.0.2" data-link-type="checkout" data-product="56934" data-store-url="#">
	...
</div>



Answer

Hey Kirsty!


You sure can. In the parent <div> tag, you can add CSS to center the text there. Beside class="thinkific-product-card" add style="text-align:center;"


Here's an example:

  

<div class="thinkific-product-card" style="text-align:center;" data-btn-bg-color="#1c4587" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-card-type="button" data-embed-version="0.0.2" data-link-type="checkout" data-product="56934" data-store-url="#">
	...
</div>


Thank you so much Aaron! That worked perfectly. 

Can you also please let me know the code to increase the button size (height) to make it bigger?


Really appreciate your help.

Hey again Kirst!


Thanks for the reply! I'm glad that helped!


If you're interested in increasing the height of the button to make it bigger, you'll need to make some edits to the styles on the page.


In the <head> section of the page, add the following:

 

<style>
#thinkific-product-embed-iframe-0 {height: 58px!important;}
.thinkembed-card-course-btn {padding: 12px 24px!important;}
</style>


Let me know how that goes.


- Aaron

Hi Aaron

I have a related question but I would like to centre the widget within the cell of a table. Is that possible ?

Link to the Wordpress Page

Hi Phil!


You should be able to do that using the same code that Aaron gives in his answer above, i.e. by adding the style="text-align:center;" into the code for the sales widget that you're adding into the table cell.


Give that a try, but if you get stuck you can reach our technical support team directly here: http://help.thinkific.com/support/tickets/new


Here's the example:

HTML

<div class="thinkific-product-card" style="text-align:center;" data-btn-bg-color="#1c4587" data-btn-txt="Enroll Now!" data-btn-txt-color="#ffffff" data-card-type="button" data-embed-version="0.0.2" data-link-type="checkout" data-product="56934" data-store-url="#">
	...
</div>
Login to post a comment