Guida all'installazione di RP Locator

Inizia in 3 semplici passaggi

Offri ai clienti un percorso semplice dal tuo sito web a un localizzatore salvato nell'app RP Locator.

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

Esempi di configurazione per la produzione

Questi esempi dal vivo utilizzano opzioni supportate dal widget di produzione.

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

Tutte le opzioni dei widget

Passa queste opzioni a QrWidget.init({...}). Solo obiettivo identifica dove è montato il widget; tutte le altre opzioni ne personalizzano il contenuto, il comportamento o l'aspetto.

Opzioni di posizionamento e montaggio

Opzioni di layout e aspetto

Opzioni di intestazione e testo del modulo

Opzioni dell'App Store

attributi di dati HTML

Usa gli attributi di visualizzazione su un elemento con data-qr-widget per l'auto-inizializzazione basata su markup. Gli attributi parent e position appartengono al tag script del widget.

Parametri di compilazione automatica degli URL

Con compilazione_automatica: vero, i parametri di query della pagina sito web, nome, su misura, e app può fornire valori di localizzazione. I valori JavaScript espliciti hanno la priorità. Usa app=Store o applicazione=Prodotto.

Esempio JavaScript completo

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Nome del tuo negozio",
  custom: "Trova i nostri prodotti vicino a te",
  app: "Store",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Il nome del tuo marchio",
  headerHeading: "Aggiungi il nostro negozio al localizzatore RP",
  headerDescription: "Tieni il nostro localizzatore a portata di mano sul tuo telefono.",
  headerInstructions: "Installa l’app, poi scansiona questo codice QR.",
  etichettaQrGenerata: "Scansiona per aggiungere questo localizzatore",
  mostraIntestazione: true,
  mostraModulo: false,
  mostraAnteprimaQR: false,
  abilitaDownload: false,
  abilitaCopia: false,
  linkDownloadiOS: "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});