Product Page Widget

This widget educates customers about HSA/FSA eligibility, and indicates that they might qualify for HSA/FSA spending or reimbursement with their purchase.

It should be installed on your product pages, typically near the price or "Add to Cart" button:

Your widget may look different - we are always working on improvements with the goal of increasing conversion.

1. Locate your Public Qualification ID on app.truemed.com

   

2. Insert these 2 lines of HTML on your site, typically near the "Buy" or "Add to Cart" buttons (make sure to replace YOUR_PUBLIC_QUALIFICATION_ID with the ID found in Step 1):

   <div id="truemed-prequalify" style="font-size: 14px;" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
   <script src="<https://truemed-public.s3.us-west-1.amazonaws.com/truemed-ads/prequal-widget.min.js>" defer></script>

3. Adjust styles on the div to fit your page! For instance, on the Komuso site pictured above, they used the following to the style property on the div from line 1 above:

   style="font-size: 16px; margin-top: 7px; margin-bottom: 10px; font-family: Poppins, sans-serif;"

For pages with black or dark backgrounds, add the attribute dark-mode to enable a white Truemed logo. Update the text color within the style property:

<div dark-mode id="truemed-prequalify" style="font-size: 14px; color: white;" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
<script src="<https://truemed-public.s3.us-west-1.amazonaws.com/truemed-ads/prequal-widget.min.js>" defer></script>

💡To enable this feature, start by tagging your products in your Shopify dashboard. Shopify Tag Docs

Choose truemed-eligible if your store sells fewer eligible products than ineligible.

Otherwise choose truemed-ineligible. This is a great option if you have many eligible products but also sell gift cards or branded merch.

To only display the widget for products with the tag 'truemed-eligible':

<div shopify-tags="display-if-eligible" id="truemed-prequalify" style="font-size: 14px;" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
<script src="<https://truemed-public.s3.us-west-1.amazonaws.com/truemed-ads/prequal-widget.min.js>" defer></script>

To only display the widget for products without the tag 'truemed-ineligible':

<div shopify-tags="display-unless-ineligible" id="truemed-prequalify" style="font-size: 14px;" icon-height="12" data-public-id="YOUR_PUBLIC_QUALIFICATION_ID"></div>
<script src="<https://truemed-public.s3.us-west-1.amazonaws.com/truemed-ads/prequal-widget.min.js>" defer></script>

That's it! Reach out with any technical questions to victoria@truemed.com.

a) Does this work for Shopify templates?

• Yes!

  • From the Shopify admin panel, navigate to Online Store -> Themes -> Actions -> Edit Code, and look for your product template (usually called something like main-product.liquid).

  • Or, send this page (along with your Public Qualification ID) to your Shopify developers.

• Does this widget work for both Payment and Reimbursement integrations?

  • Yes! Based on your Public Qualification ID, we'll load the product page (PDP) widget custom-tailored to your merchant profile.