Add Real Rider™ Stories to Your Site | Dealer Widget by Draw It Out®

Add Real Rider™ Stories to Your Website

Share real testimonials from the field. Let your customers see how everyday riders trust Draw It Out®—right from your own website.

What It Is

This is a live, auto-updating widget that showcases real riders using Draw It Out® products in the arena, barn, and on the road. It’s fully responsive, lightweight, and looks great on any site.

Why Add It?

  • ✅ Builds trust with your customers
  • ✅ Links directly to the DiO products you carry
  • ✅ Keeps customers on your site longer
  • ✅ Proves these products work for real horses

Copy & Paste Embed Code

Paste this code wherever you want the stories to appear (homepage, product page, or sidebar):

<iframe 
  src="https://drawliniment.com/pages/real-rider-stories" 
  width="100%" 
  height="1200" 
  frameborder="0" 
  style="border: none; overflow: hidden;"></iframe>

🛠 Works with Shopify, WordPress, Wix, Squarespace, BigCommerce, and more.

Need It Customized?

We can personalize your embed with your logo, a custom intro message, or even local riders from your region.

Email us at support@drawliniment.com and we’ll get you set up.

Preview the Widget →
Dealer Embed Widget | Copy-Paste Product Card | Draw It Out®
Draw It Out® — Dealer Tools

Dealer Embed Widget

Drop a brand-safe Draw It Out® product card on your site in seconds. It’s responsive, lightweight, and easy to customize. Use the No-JS HTML, Universal JS, or Shopify Liquid version below.

No-JS HTML Universal JS Shopify Liquid
Live Preview No-JS HTML Universal JS Shopify Liquid FAQ

Tip: keep the button that points to your PDP first, and the “Learn More” link to Draw It Out® second.

Preview

What it looks like

Draw It Out 16oz High Potency Gel
Sensation-Free • Odorless • Wrap-Ready

Draw It Out® Gel — 16oz High Potency

No sting. No scent. Stays where you put it—built for clean, show-friendly routines.

Buy from This Dealer Learn More

Responsive up to 680px wide; adapts to phones automatically.

Option A — No-JS HTML (safest, works anywhere)

Paste this into your page. Change BUY_URL to your product page. Optional: change the image to your own PDP image.

HTML 
<!-- Draw It Out® Dealer Card (No-JS) -->
<style>
.dio-card{--dio:#78be20;display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>

<div class="dio-card" role="group" aria-label="Draw It Out 16oz Gel Product Card">
  <img alt="Draw It Out 16oz High Potency Gel"
       src="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg">
  <div class="dio-meta">
    <span class="dio-badge">Sensation-Free • Odorless • Wrap-Ready</span>
    <h4>Draw It Out® Gel — 16oz High Potency</h4>
    <p>No sting. No scent. Stays where you put it—built for clean, show-friendly routines.</p>
    <div class="dio-ctas">
      <a class="dio-cta primary" href="BUY_URL">Buy from This Dealer</a>
      <a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">Learn More</a>
    </div>
  </div>
</div>

Option B — Universal JS (config with data-attributes)

Paste both blocks. Edit the data-* values to point the widget at your URLs and image.

HTML 
<!-- Draw It Out® Dealer Card (Universal JS) -->
<div class="dio-widget"
     data-title="Draw It Out® Gel — 16oz High Potency"
     data-desc="No sting. No scent. Stays where you put it—built for clean, show-friendly routines."
     data-buy="https://YOUR-DOMAIN.example/product/draw-it-out-16oz"
     data-learn="https://drawliniment.com/pages/draw-it-out-gel-16oz"
     data-img="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg"
     data-accent="#78be20"></div>
JS + CSS 
<style>
.dio-card{--dio:var(--accent,#78be20);display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>
<script>
(function(){
  var el = document.querySelector('.dio-widget');
  if(!el) return;
  var t=el.dataset.title||'Draw It Out® Gel — 16oz High Potency';
  var d=el.dataset.desc||'No sting. No scent. Stays where you put it—built for clean, show-friendly routines.';
  var buy=el.dataset.buy||'#';
  var learn=el.dataset.learn||'https://drawliniment.com/pages/draw-it-out-gel-16oz';
  var img=el.dataset.img||'https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg';
  var accent=el.dataset.accent||'#78be20';
  el.innerHTML = '<div class="dio-card" style="--accent:'+accent+'" role="group" aria-label="'+t+' Card">'
    +'<img alt="'+t+'" src="'+img+'" loading="lazy">'
    +'<div class="dio-meta">'
    +'<span class="dio-badge">Sensation-Free • Odorless • Wrap-Ready</span>'
    +'<h4>'+t+'</h4>'
    +'<p>'+d+'</p>'
    +'<div class="dio-ctas">'
    +'<a class="dio-cta primary" href="'+buy+'">Buy from This Dealer</a>'
    +'<a class="dio-cta ghost" href="'+learn+'">Learn More</a>'
    +'</div>'
    +'</div>'
    +'</div>';
})();
</script>

Option C — Shopify Liquid (theme snippet)

Create a snippet named dio-card.liquid, paste the code, then render it in a Custom Liquid section. Change buy_url as needed.

Liquid snippet 
{% comment %} Draw It Out® Dealer Card (Liquid) {% endcomment %}
{% assign buy_url = buy_url | default: 'https://YOUR-SHOP.myshopify.com/products/draw-it-out-16oz' %}
<style>
.dio-card{--dio:#78be20;display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px;margin:8px 0}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>

<div class="dio-card" role="group" aria-label="Draw It Out 16oz Gel Product Card">
  <img alt="Draw It Out 16oz High Potency Gel"
       src="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg">
  <div class="dio-meta">
    <span class="dio-badge">Sensation-Free • Odorless • Wrap-Ready</span>
    <h4>Draw It Out® Gel — 16oz High Potency</h4>
    <p>No sting. No scent. Stays where you put it—built for clean, show-friendly routines.</p>
    <div class="dio-ctas">
      <a class="dio-cta primary" href="{{ buy_url }}">Buy from This Dealer</a>
      <a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">Learn More</a>
    </div>
  </div>
</div>
Render example 
{% render 'dio-card', buy_url: 'https://YOUR-SHOP.myshopify.com/products/draw-it-out-16oz' %}

Customization

  • Accent color: change #78be20 in CSS or set data-accent in Universal JS.
  • Image: swap src= to your own product image if preferred.
  • Tracking: add UTM to your BUY_URL (e.g., ?utm_source=dealer-site).
  • Width: wrap the card in a container and set a max-width that fits your layout.
Use on intact skin only. “Wrap-ready” means apply thin, allow full absorption, then gear on. Recheck heat/tension at 15–30 minutes.

FAQ

Will this work on WordPress / Wix / Squarespace?

Yes. Use the No-JS HTML version (Option A) in a standard HTML block. For WordPress, you can also paste the Universal JS version into a Custom HTML block.

Can I localize the text?

Yes—edit the headline, description, and button labels right in the snippet. Keep the Learn More link pointing to the Draw It Out® info page.

How do I make the image square or full-width?

Adjust width/height on the img, or remove the fixed sizes to let it expand full-width. The layout collapses to a single column on phones automatically.

Any CDN or external files?

No. Everything is inline for speed and reliability. You can swap the image URL to your own CDN if you like.

© Draw It Out®. Not a drug. Not intended to diagnose, treat, cure, or prevent disease. Always follow current show rules and consult your veterinarian for medical questions.

Find Our Store

More » Less «
  • List
  • Map