RP-Locator-Einrichtungsanleitung

In 3 einfachen Schritten loslegen

Bieten Sie Ihren Kunden einen einfachen Weg von Ihrer Website zu einem gespeicherten Standort in der RP Locator App.

<!-- 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>

Produktionskonfigurationsbeispiele

Diese Live-Beispiele verwenden Optionen, die vom Produktions-Widget unterstützt werden.

QrWidget.init({
  target: "#widget-header-only",
  theme: "brand",
  color: "#A4118D",
  logo: "https://roseperl.com/.../rp-svg-black-2.webp",
  logoLabel: "Rose Perl Technology",
  headerGeneratedQrLabel: "Zum Installieren scannen",
  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"
});

Alle Widget-Optionen

Geben Sie diese Optionen weiter an QrWidget.init({...}). Nur Ziel identifiziert, wo das Widget platziert ist; alle anderen Optionen passen seinen Inhalt, sein Verhalten oder sein Erscheinungsbild an.

Ortungs- und Montageoptionen

Layout- und Anzeigeeinstellungen

Optionen für Kopfzeilen- und Formulartext

App-Store-Optionen

HTML-Datenattribute

Verwende die Anzeigeattribute für ein Element mit data-qr-widget für die Markup-basierte automatische Initialisierung. Die Attribute „parent“ und „position“ gehören in das Skript-Tag des Widgets.

URL-Autofill-Parameter

Mit Automatisches Ausfüllen: aktiv, die Seitenabfrageparameter Website, Name, benutzerdefiniert, und App kann Locator-Werte liefern. Explizite JavaScript-Werte haben Vorrang. Verwenden App=Store oder App = Produkt.

Vollständiges JavaScript-Beispiel

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Name Ihres Geschäfts",
  custom: "Finden Sie unsere Produkte in Ihrer Nähe",
  app: "Store",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Ihr Markenname",
  headerHeading: "Fügen Sie unseren Shop zum RP-Standortsucher hinzu",
  headerDescription: "Halten Sie unseren Standortsucher auf Ihrem Smartphone bereit.",
  headerInstructions: "Installieren Sie die App und scannen Sie dann diesen QR-Code.",
  headerGeneratedQrLabel: "Scannen, um diesen Locator hinzuzufügen",
  showHeader: true,
  showForm: false,
  showQRPreview: false,
  enableDownload: false,
  enableCopy: false,
  iosDownloadLink: "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});