Embed Buy Button

This article goes over how to create embed a buy now button for your Teachable products to your external website.

Overview

Easily connect your Teachable products to your website. With our embeddable buy button, you can integrate Teachable's checkout process right into your site, allowing you to showcase and sell your products without redirecting users away from your main website.

Create a Product Card

  1. Go to the course or bundle you want to create a Product Card for and click on the “Embed” page.

  1. Customize your Product Card by:
    • Choosing to hide or show your course or bundle image.
    • Updating your product title (it defaults to your course or bundle title).
    • Updating your product description (it defaults to your course or bundle description).
    • Adding pricing plans you’d like to showcase (it defaults to your first pricing plan).
    • Updating the call to action button.
    • Customizing the border radius of the pricing plan and call to action button.
    • Customizing the text colors of your Product Card (default colors come from your school theme).
Note: All fields except for the pricing plans and call to action are optional.

  1. Once you’ve finished customizing your Product Card, it’s ready to use! Click on “Copy Code” to copy the HTML for your customized Product Card.

Add a Product Card to your website

  1. Go to your website's sales page and add the block by clicking on the “Embed” or “Code” option. For example, Squarespace will look something like this:
  2. Paste the copied code and you should see your Product Card on the sales page.

Note: The configuration of your Product Card is not saved, so be sure to copy the code before navigating away from the page.
Note: If you make changes to your product and want them reflected on the Product Cards, create a new card. This is especially important if you change the pricing plans.

AddingProductCard-ezgif.com-video-to-gif-converter.gif

Remove a Product Card from your website

To remove your Product Card, simply click the remove button on the block in your website’s sales page. For example, Squarespace will look something like this:

RemovingProductCard-ezgif.com-video-to-gif-converter (1).gif

 

Was this article helpful?

2 out of 4 found this helpful