Guía de configuración de RP Locator

Comience en 3 sencillos pasos

Ofrezca a los clientes un camino sencillo desde su sitio web hasta un localizador guardado en la aplicación 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>

Ejemplos de configuración de producción

Estos ejemplos en vivo usan opciones compatibles con el widget de producción.

QrWidget.init({
  target: "#widget-header-only",
  theme: "brand",
  color: "#A4118D",
  logo: "https://roseperl.com/.../rp-svg-black-2.webp",
  logoLabel: "Rose Perl Technology",
  headerGeneratedQrLabel: "Escanear para instalar",
  website: "https://example.com/store-locator",
  name: "Tienda principal de Rose Perl",
  custom: "roseperl-demo",
  app: "Tienda",
  mostrarEncabezado: true,
  mostrarFormulario: false,
  mostrarVistaPreviaQR: 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"
});

Todas las opciones de widgets

Pasa estas opciones a QrWidget.init({...}). Solo objetivo identifica dónde está montado el widget; todas las demás opciones personalizan su contenido, comportamiento o apariencia.

Opciones de localizador y montaje

Opciones de diseño y apariencia

Opciones de texto para encabezados y formularios

Opciones de la tienda de aplicaciones

Atributos de datos HTML

Utilice los atributos de visualización en un elemento con data-qr-widget para la auto-inicialización basada en marcado. Los atributos parent y position pertenecen a la etiqueta de script del widget.

Parámetros de autorrelleno de URL

Con autocompletar: true, los parámetros de consulta de la página sitio web, nombre, personalizado, y aplicación puede proporcionar valores de localizador. Los valores explícitos de JavaScript tienen prioridad. Usar aplicación=Tienda o app=Producto.

Ejemplo completo de JavaScript

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Nombre de tu tienda",
  custom: "Encuentra nuestros productos cerca de ti",
  app: "Tienda",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Nombre de tu marca",
  headerHeading: "Añade nuestra tienda al localizador de RP",
  headerDescription: "Ten nuestro localizador a mano en tu móvil.",
  instrucciones del encabezado: "Instala la aplicación y, a continuación, escanea este código QR",
  etiquetaQRgenerada: "Escanea para añadir este localizador",
  mostrarencabezado: true,
  mostrarformulario: false,
  mostrarvista previa del QR: false,
  habilitar descarga: false,
  habilitar copia: false,
  enlace de descarga para iOS: "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});