Ajoutez les témoignages Real Rider™ à votre site web

Partagez de vrais témoignages du terrain. Laissez vos clients voir comment les cavaliers du quotidien font confiance à Draw It Out® — directement depuis votre propre site web.

Ce que c'est

Il s'agit d'un widget en direct, à mise à jour automatique, qui présente de vrais cavaliers utilisant les produits Draw It Out® dans l'arène, à l'écurie et sur la route. Il est entièrement réactif, léger et s'affiche parfaitement sur n'importe quel site.

Pourquoi l'ajouter ?

  • ✅ Renforce la confiance de vos clients
  • ✅ Crée des liens directs vers les produits DiO que vous proposez
  • ✅ Maintient les clients plus longtemps sur votre site
  • ✅ Prouve que ces produits fonctionnent pour de vrais chevaux

Copier et coller le code d'intégration

Collez ce code là où vous souhaitez que les témoignages apparaissent (page d'accueil, page produit ou barre latérale) :

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

🛠 Fonctionne avec Shopify, WordPress, Wix, Squarespace, BigCommerce, et plus encore.

Besoin d'une personnalisation ?

Nous pouvons personnaliser votre intégration avec votre logo, un message d'introduction personnalisé ou même des cavaliers locaux de votre région.

Envoyez-nous un e-mail à support@drawliniment.com et nous vous aiderons à l'installer.

Widget d'intégration pour les revendeurs | Carte produit à copier-coller | Draw It Out®
Draw It Out® — Outils revendeur

Widget d'intégration pour les revendeurs

Déposez une carte produit Draw It Out® sécurisée pour votre marque sur votre site en quelques secondes. Elle est réactive, légère et facile à personnaliser. Utilisez la version HTML sans JS, JS universel ou Liquid Shopify ci-dessous.

Astuce : gardez le bouton qui pointe vers votre PDP en premier, et le lien « En savoir plus » vers Draw It Out® en second.

Aperçu

À quoi ça ressemble

Draw It Out Gel 16oz Haute Puissance
Sans sensation • Inodore • Prêt à envelopper

Draw It Out® Gel — 16oz Haute Puissance

Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.

Réactif jusqu'à 680px de large ; s'adapte automatiquement aux téléphones.

Option A — HTML sans JS (le plus sûr, fonctionne partout)

Collez ceci dans votre page. Remplacez BUY_URL par l'URL de votre page produit. Facultatif : remplacez l'image par votre propre image PDP.

HTML
<!-- Carte Revendeur Draw It Out® (Sans 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="Carte produit Draw It Out Gel 16oz">
  <img alt="Draw It Out Gel 16oz Haute Puissance"
       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">Sans sensation • Inodore • Prêt à envelopper</span>
    <h4>Draw It Out® Gel — 16oz Haute Puissance</h4>
    <p>Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.</p>
    <div class="dio-ctas">
      <a class="dio-cta primary" href="BUY_URL">Acheter chez ce revendeur</a>
      <a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">En savoir plus</a>
    </div>
  </div>
</div>

Option B — JS universel (config avec attributs de données)

Collez les deux blocs. Modifiez les valeurs data-* pour que le widget pointe vers vos URL et votre image.

HTML
<!-- Carte Revendeur Draw It Out® (JS Universel) -->
<div class="dio-widget"
     data-title="Draw It Out® Gel — 16oz Haute Puissance"
     data-desc="Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles."
     data-buy="https://VOTRE-DOMAINE.exemple/produit/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 Haute Puissance';
  var d=el.dataset.desc||'Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.';
  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="Carte '+t+'">'
    +'<img alt="'+t+'" src="'+img+'" loading="lazy">'
    +'<div class="dio-meta">'
    +'<span class="dio-badge">Sans sensation • Inodore • Prêt à envelopper</span>'
    +'<h4>'+t+'</h4>'
    +'<p>'+d+'</p>'
    +'<div class="dio-ctas">'
    +'<a class="dio-cta primary" href="'+buy+'">Acheter chez ce revendeur</a>'
    +'<a class="dio-cta ghost" href="'+learn+'">En savoir plus</a>'
    +'</div>'
    +'</div>'
    +'</div>';
})();
</script>

Option C — Liquid Shopify (extrait de thème)

Créez un extrait nommé dio-card.liquid, collez le code, puis affichez-le dans une section Liquid personnalisée. Modifiez buy_url si nécessaire.

Extrait Liquid
{% comment %} Carte Revendeur Draw It Out® (Liquid) {% endcomment %}
{% assign buy_url = buy_url | default: 'https://VOTRE-BOUTIQUE.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="Carte produit Draw It Out Gel 16oz">
  <img alt="Draw It Out Gel 16oz Haute Puissance"
       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">Sans sensation • Inodore • Prêt à envelopper</span>
    <h4>Draw It Out® Gel — 16oz Haute Puissance</h4>
    <p>Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.</p>
    <div class="dio-ctas">
      <a class="dio-cta primary" href="{{ buy_url }}">Acheter chez ce revendeur</a>
      <a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">En savoir plus</a>
    </div>
  </div>
</div>
Exemple d'affichage
{% render 'dio-card', buy_url: 'https://VOTRE-BOUTIQUE.myshopify.com/products/draw-it-out-16oz' %}

Personnalisation

  • Couleur d'accentuation : modifiez #78be20 dans le CSS ou définissez data-accent dans le JS universel.
  • Image : remplacez src= par votre propre image produit si vous préférez.
  • Suivi : ajoutez des UTM à votre BUY_URL (par exemple, ?utm_source=dealer-site).
  • Largeur : enveloppez la carte dans un conteneur et définissez une largeur maximale qui s'adapte à votre mise en page.
Utiliser uniquement sur une peau intacte. « Prêt à envelopper » signifie appliquer finement, laisser absorber complètement, puis mettre l'équipement. Vérifier la chaleur/tension après 15 à 30 minutes.

FAQ

Cela fonctionnera-t-il sur WordPress / Wix / Squarespace ?

Oui. Utilisez la version HTML sans JS (Option A) dans un bloc HTML standard. Pour WordPress, vous pouvez également coller la version JS universel dans un bloc HTML personnalisé.

Puis-je localiser le texte ?

Oui, modifiez le titre, la description et les étiquettes des boutons directement dans l'extrait. Gardez le lien En savoir plus pointant vers la page d'informations Draw It Out®.

Comment rendre l'image carrée ou pleine largeur ?

Ajustez la largeur/hauteur de l'img, ou supprimez les tailles fixes pour lui permettre de s'étendre en pleine largeur. La mise en page se réduit à une seule colonne sur les téléphones automatiquement.

Des CDN ou des fichiers externes ?

Non. Tout est intégré pour la vitesse et la fiabilité. Vous pouvez échanger l'URL de l'image avec votre propre CDN si vous le souhaitez.

Find My Location Icon
More » Less «
  • List
  • Map
    Draw It Out®

    Show-Safe Relief. Naturally.

    We build every product for real riders who care as much as we do. No burn, no sting, no nonsense. Just clean, sensation-free relief built for real horses, real barns, and repeatable routines.

    From barn aisle to show ring, Draw It Out® stands for one simple promise. Modern Performance, Proven Calm.

    Start Here

    Not sure what to do next?

    Pick the fastest next step. If you already know what you need, jump straight to the right lane.

    Routine first

    Built for repeatable routines, not hype.

    Real riders

    Made for everyday horse people who do the work.

    Need help?

    Need a quick pointer? Contact us.