Guia de Configuração do RP Locator

Comece em 3 passos fáceis

Faculte aos clientes um caminho simples a partir do seu website para um localizador guardado na aplicação 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>

Exemplos de Configuração de Produção

Estes exemplos em direto utilizam opções suportadas pelo "widget" de produção.

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

Todas as Opções de Widgets

Transmita estas opções para QrWidget.init({...}). Apenas alvo identifica onde o widget é montado; todas as outras opções personalizam o seu conteúdo, comportamento ou aspeto.

Opções de localização e montagem

Opções de aspeto e esquema

Opções de cabeçalho e texto de formulário

Opções da App Store

Atributos de dados HTML

Utilize os atributos de apresentação num elemento com data-qr-widget para a auto-inicialização baseada em marcação. Os atributos parent e position pertencem à etiqueta script do widget.

parâmetros de preenchimento automático de URLs

Com preenchimento automático: verdadeiro, os parâmetros de consulta da página sítio web, nome, personalizado, e aplicação pode fornecer valores de localizador. Os valores explícitos de JavaScript têm prioridade. Use aplicação=Loja ou app=Produto.

Exemplo completo em JavaScript

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Nome da sua loja",
  custom: "Encontre os nossos produtos perto de si",
  app: "Loja",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Nome da sua marca",
  headerHeading: "Adicione a nossa loja ao Localizador RP",
  headerDescription: "Mantenha o nosso localizador à mão no seu telemóvel.",
  instruçõesNoCabeçalho: "Instale a aplicação e, em seguida, digitalize este código QR.",
  rótuloQRgeradoNoCabeçalho: "Leia para adicionar este localizador",
  mostrarCabeçalho: true,
  mostrarFormulário: false,
  mostrarPré-visualizaçãoQR: false,
  ativarDownload: false,
  ativarCópia: false,
  ligaçãoDownloadiOS: "https://apps.apple.com/us/app/rp-locator/id6770829229",
  googlePlayDownloadLink: "https://play.google.com/store/apps/details?id=com.roseperl"
});