Skip to content

Last modified: August 16, 2024

Embeddable product cards

Overview

Display products on your website with embeddable product cards! When product cards are selected, patients are taken directly to products in Fullscript, where they can learn more and place an order.

Leverage this powerful tool to:

  • Increase the reach of your practice from one to many
  • Make it easier for patients to view the products you like
  • Show innovation in the industry
  • Enhance your online presence and position yourself as an expert in your community

Note:

Ortho Molecular Products items are not available to be embedded outside of the Fullscript platform.

Adding embeddable product cards to your website

To embed products on your website: 

  1. In the catalog, search for products.
  2. Select the more options icon ( ) then Showcase on my website. This option is also accessible from the product display page where product information (i.e., ingredients, dosage, directions, etc.) is displayed.
    Selecting Showcase on my website.
  3. Copy the code to your clipboard.
  4. From your website or blog, go to the page where you’d like to add a product card and open the code editor.
  5. Paste the code and preview your changes before publishing.
Viewing product cards on an external website
Viewing product cards on an external website.

Tip!

Ensure your catalog settings don’t lead to a poor patient experience. Featured products should always be accessible to patients in your catalog or favorites, otherwise they won’t have permission to view or order the product. See Product catalog and permissions for more information on restricting your dispensary’s catalog to patients.

Still have questions? 

We recommend watching our brief Embeddable product cards video! Alternatively, contact our Customer Success team or consider contacting the support team of your website or blog builder for further assistance.

Tip!

For more information, see the Embedding a Site or a Widget support article from Wix.

HTML resources

Not familiar with coding? Not to worry, here are some tips!

  • Use the support resources from your website builder’s help center (i.e., (Wix, WordPress, Squarespace, etc.)
  • Try reaching out to your website builder’s support team!
  • Consider reaching out to a web development expert for assistance.

Note:

We’ve provided general steps for adding code for three popular website builders below. Steps may vary based on your subscription.

Tips for Squarespace

Squarespace uses code blocks to add custom code to a page, blog post, sidebar, footer, and other content areas. However, embeddable product cards require JavaScript, which is only supported in code blocks on Squarespace business plans and higher.

Tip!

For additional information from Squarespace, see their support content on Code blocks.

To add a Code Block to an existing page and embed a Fullscript website button:

  1. From your website’s homepage, click on Pages, then select the page where you want your website button to be placed.
  2. Select Edit from the top left-hand corner of the page.
  3. Now, add a new section or hover over an existing section you would like to add the website button. Click the + button to open the block menu.
  4. Search and select Code.
  5. A code block set to ‘JavaScript‘ will display code as text by default. To render an image of the product card in Code Blocks, select HTML from the drop-down menu.
Selecting HTML code
  1. Paste the product’s embed code from Fullscript into the code window.
  2. Add script coding to the beginning and end of what you’ve pasted in the previous step. See an example here.

Note:

It’s normal for code to be disabled while logged into your Squarespace website. Their support team recommends testing while logged out in a private or incognito window. This is often the cause of the Script Disabled message after the code is entered.

  1. Preview your changes, and publish when ready.

Tips for WordPress

WordPress offers multiple ways of editing HTML for a page or post. In this walkthrough, we’ll be focusing on how to use their latest editor.

Almost all blocks on pages in WordPress have the option to edit as HTML. To edit a page block:

  1. In WordPress, navigate to Pages within the site drop-down on the left-hand side of your screen.
  2. Next, select the page where you’d like the product card displayed.
  3. Click on a block.
  4. Select the menu ( ) from the top of the block.
  5. Select Custom HTML.
  6. Paste the product’s embeddable code in the code box.
  7. Select Preview to view your changes, and publish when ready!
Embedding HTML code with WordPress.
Embedding HTML code with WordPress.

Tip!

Those with a thorough understanding of HTML may choose to edit the HTML directly in the code editor. For more information, see WordPress’ Advanced HTML support article.

Tips for Wix

Wix offers an easy solution to uploading HTML content using iFrames. This feature allows you to display product cards anywhere on your website.

To add content to your Wix site in an iframe:

  1. In the Wix Editor of your website, click on the left-hand side of your screen.
  2. Select Embeds.
  3. Click Embed a Widget.
  4. Click Edit code.
  5. For What do you want to add? select Code.
  6. Paste the product’s embed code in the feild below.
  7. Add allow – script, with no spaces, in angle brackets directly before the product code added in the previous step. This is necessary for the card to be visible on your site.
  8. When finished, publish your changes.

Tip!

For more information, see the Embedding a Site or a Widget support article from Wix.

Was this article helpful?