Guide de configuration du localisateur RP

Commencez en 3 étapes faciles

Offrez aux clients un moyen simple d'accéder à un localisateur enregistré dans l'application RP Locator directement depuis votre site web.

<!-- Copy and paste this where you want the widget to appear. -->
<div id="my-qr-widget"></div>

<script src="https://cdn.roseperl.com/widgets/rp-qr/RP-QR-Widget-Prod.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    QrWidget.init({
      target: "#my-qr-widget",

      // Update these four settings for your locator.
      website: "https://your-site.com/store-locator",
      name: "Your Store Name",
      custom: "Find our products near you",
      app: "Store", // Use "Store" or "Product".

      // Optional branding and display settings.
      logo: "https://your-site.com/your-logo.png",
      logoLabel: "Your Brand Name",
      theme: "brand", // Use "light", "dark", or "brand".
      color: "#A4118D",
      showHeader: true,
      showForm: false,
      showQRPreview: false
    });
  });
</script>

Exemples de configuration de production

Ces exemples en direct utilisent des options prises en charge par le widget de production.

QrWidget.init({
  target : "#widget-header-only",
  theme : "brand",
  color : "#A4118D",
  logo : "https://roseperl.com/.../rp-svg-black-2.webp",
  logoLabel : "Rose Perl Technology",
  headerGeneratedQrLabel : "Scan To Install",
  website: "https://example.com/store-locator",
  name: "Rose Perl Main Store",
  custom: "roseperl-demo",
  app: " Store ",
  showHeader : true,
  showForm : false,
  showQRPreview : false
});

QrWidget.init({
  target: "#widget-full-ui",
  showHeader: true,
  showForm: true,
  showQRPreview: true,
  enableCopy: true,
  enableDownload: true
});

<div
  data-qr-widget
 data-qr-title="Rose Perl Auto Init Example"
  data-qr-theme="brand"
  data-qr-color="#A4118D"
  data-qr-logo="https://roseperl.com/.../rp-svg-black-2.webp"
  data-qr-show-header="true"
  data-qr-show-form="false"
  data-qr-show-display="false">
</div>

QrWidget.init({
  target: "#widget-store-links",
  iosDownloadLink: "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});

Toutes les options de widgets

Transsez ces options à QrWidget.init({...}). Seulement cible identifie où le widget est monté ; toutes les autres options personnalisent son contenu, son comportement ou son apparence.

Options de positionnement et de montage

Options de mise en page et d'apparence

Options de texte pour l'en-tête et le formulaire

Options de l'App Store

attributs de données HTML

Utilisez les attributs d'affichage sur un élément avec data-qr-widget pour l'auto-initialisation basée sur le balisage. Les attributs parent et position doivent figurer sur la balise script du widget.

Paramètres de saisie automatique d'URL

Avec saisie automatique : vrai, les paramètres de requête de la page site web, nom, sur mesure, et application peut fournir des valeurs de localisation. Les valeurs JavaScript explicites ont la priorité. Utiliser app=Boutique ou app=Produit.

Exemple JavaScript complet

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Nom de votre magasin",
  custom: "Retrouvez nos produits près de chez vous",
  app: "Store",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Nom de votre marque",
  headerHeading: "Ajoutez notre boutique à RP Locator",
  headerDescription: "Gardez notre localisateur à portée de main sur votre téléphone.",
  instructions-en-tête : " Installez l’application, puis scannez ce code QR. ",
  libellé du QR code généré dans l’en-tête : " Scannez pour ajouter ce localisateur ",
  afficher l’en-tête : true,
  afficher le formulaire : false,
  afficher l’aperçu du QR code : false,
  autoriser le téléchargement : false,
  autoriser la copie : false,
  lien de téléchargement iOS : "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});