{"id":22536,"date":"2026-09-10T20:53:12","date_gmt":"2026-09-10T20:53:12","guid":{"rendered":"https:\/\/roseperl.com\/?page_id=22536"},"modified":"2026-09-10T20:56:44","modified_gmt":"2026-09-10T20:56:44","slug":"guide-dinstallation-du-localisateur-rp","status":"publish","type":"page","link":"https:\/\/roseperl.com\/fr\/rp-locator-setup-guide\/","title":{"rendered":"Guide de configuration du localisateur RP"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22536\" class=\"elementor elementor-22536\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdfd139 e-flex e-con-boxed e-con e-parent\" data-id=\"fdfd139\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c07ca1 elementor-widget elementor-widget-html\" data-id=\"6c07ca1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n      :root {\n        --rp-bg: #f8f1f6;\n        --rp-surface: rgba(255, 255, 255, 0.92);\n        --rp-surface-strong: #ffffff;\n        --rp-text: #171219;\n        --rp-muted: #6d5669;\n        --rp-accent: #a4118d;\n        --rp-accent-strong: #7f0e6d;\n        --rp-border: rgba(164, 17, 141, 0.14);\n        --rp-shadow: 0 24px 60px rgba(95, 35, 83, 0.12);\n        --rp-radius: 24px;\n        --rp-code: #231721;\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n\n      body {\n        margin: 0;\n        font-family: \"Avenir Next\", \"Segoe UI\", sans-serif;\n        color: var(--rp-text);\n        background:\n          radial-gradient(circle at top left, rgba(164, 17, 141, 0.14), transparent 28%),\n          radial-gradient(circle at right 10% top 15%, rgba(236, 194, 229, 0.65), transparent 24%),\n          linear-gradient(180deg, #fff9fd 0%, var(--rp-bg) 48%, #f4edf3 100%);\n      }\n\n      .page-shell {\n        width: 90%;\n        max-width: none;\n        margin: 0 auto;\n        padding: 32px 0 72px;\n      }\n\n      .hero {\n        position: relative;\n        overflow: hidden;\n        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 235, 246, 0.96));\n        border: 1px solid var(--rp-border);\n        border-radius: 32px;\n        padding: 32px;\n        box-shadow: var(--rp-shadow);\n      }\n\n      .hero::after {\n        content: \"\";\n        position: absolute;\n        inset: auto -80px -80px auto;\n        width: 280px;\n        height: 280px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(164, 17, 141, 0.16), transparent 70%);\n        pointer-events: none;\n      }\n\n      .hero__brand {\n        display: flex;\n        align-items: center;\n        gap: 18px;\n        margin-bottom: 24px;\n      }\n\n      .hero__brand-mark {\n        width: 80px;\n        height: 80px;\n        border-radius: 22px;\n        padding: 14px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);\n      }\n\n      .hero__brand-mark img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n      }\n\n      .hero__eyebrow {\n        margin: 0 0 6px;\n        color: var(--rp-accent);\n        font-size: 13px;\n        font-weight: 700;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n      }\n\n      .hero h1 {\n        margin: 0;\n        font-size: clamp(2.4rem, 5vw, 4.4rem);\n        line-height: 0.95;\n        letter-spacing: -0.04em;\n      }\n\n      .hero p {\n        max-width: 760px;\n        margin: 18px 0 0;\n        font-size: 1.05rem;\n        line-height: 1.6;\n        color: var(--rp-muted);\n      }\n\n      .hero__chips {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        margin-top: 24px;\n      }\n\n      .chip {\n        display: inline-block;\n        padding: 10px 14px;\n        border-radius: 999px;\n        background: rgba(164, 17, 141, 0.08);\n        border: 1px solid rgba(164, 17, 141, 0.12);\n        color: var(--rp-accent-strong);\n        font-size: 0.92rem;\n        font-weight: 600;\n        text-decoration: none;\n      }\n\n      a.chip:hover,\n      a.chip:focus-visible {\n        background: rgba(164, 17, 141, 0.16);\n        outline: 2px solid rgba(164, 17, 141, 0.28);\n        outline-offset: 2px;\n      }\n\n      .section {\n        margin-top: 28px;\n        background: var(--rp-surface);\n        border: 1px solid var(--rp-border);\n        border-radius: var(--rp-radius);\n        padding: 28px;\n        box-shadow: var(--rp-shadow);\n        backdrop-filter: blur(10px);\n      }\n\n      .section h2 {\n        margin: 0 0 12px;\n        font-size: 1.6rem;\n        letter-spacing: -0.03em;\n      }\n\n      .section > p {\n        margin: 0;\n        color: var(--rp-muted);\n        line-height: 1.6;\n      }\n\n      .docs-grid,\n      .examples-grid {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 22px;\n        margin-top: 22px;\n      }\n\n      .examples-grid {\n        grid-template-columns: minmax(0, 1fr);\n      }\n\n      .doc-card,\n      .example-card {\n        background: var(--rp-surface-strong);\n        border: 1px solid rgba(164, 17, 141, 0.12);\n        border-radius: 20px;\n        padding: 22px;\n      }\n\n      .doc-card h3,\n      .example-card h3 {\n        margin: 0 0 10px;\n        font-size: 1.05rem;\n      }\n\n      .doc-card p,\n      .example-card p {\n        margin: 0 0 12px;\n        color: var(--rp-muted);\n        line-height: 1.6;\n      }\n\n      .option-list {\n        margin: 0;\n        padding-left: 18px;\n        color: var(--rp-text);\n        line-height: 1.7;\n      }\n\n      .option-list code {\n        color: var(--rp-accent-strong);\n        font-weight: 700;\n      }\n\n      pre {\n        margin: 0;\n        padding: 16px;\n        padding-top: 52px;\n        overflow-x: auto;\n        border-radius: 16px;\n        background: var(--rp-code);\n        color: #f7edf5;\n        font-size: 0.9rem;\n        line-height: 1.5;\n      }\n\n      code {\n        font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace;\n      }\n\n      .code-example {\n        position: relative;\n        margin-top: 14px;\n      }\n\n      .copy-code-button {\n        position: absolute;\n        z-index: 1;\n        top: 10px;\n        right: 10px;\n        min-width: 76px;\n        padding: 7px 12px;\n        border: 1px solid rgba(255, 255, 255, 0.25);\n        border-radius: 9px;\n        color: #ffffff;\n        background: rgba(255, 255, 255, 0.12);\n        font: inherit;\n        font-size: 0.8rem;\n        font-weight: 700;\n        cursor: pointer;\n      }\n\n      .copy-code-button:hover,\n      .copy-code-button:focus-visible {\n        background: rgba(255, 255, 255, 0.22);\n        outline: none;\n      }\n\n      .copy-code-button[data-copied=\"true\"] {\n        background: #287a47;\n        border-color: #53a66e;\n      }\n\n      .options-table-wrap {\n        margin-top: 20px;\n        overflow-x: auto;\n        border: 1px solid var(--rp-border);\n        border-radius: 16px;\n      }\n\n      .options-table {\n        width: 100%;\n        border-collapse: collapse;\n        background: var(--rp-surface-strong);\n        text-align: left;\n      }\n\n      .options-table th,\n      .options-table td {\n        padding: 12px 14px;\n        border-bottom: 1px solid var(--rp-border);\n        vertical-align: top;\n        line-height: 1.5;\n      }\n\n      .options-table th {\n        color: var(--rp-accent-strong);\n        background: rgba(164, 17, 141, 0.06);\n        font-size: 0.86rem;\n        letter-spacing: 0.04em;\n        text-transform: uppercase;\n      }\n\n      .options-table tr:last-child td {\n        border-bottom: 0;\n      }\n\n      .options-table code {\n        color: var(--rp-accent-strong);\n        font-weight: 700;\n      }\n\n      .download-qr-grid {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 14px;\n        margin-top: 18px;\n      }\n\n      .download-qr-card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n        padding: 14px;\n        border: 1px solid var(--rp-border);\n        border-radius: 14px;\n        background: #ffffff;\n        text-align: center;\n      }\n\n      .download-qr-card canvas {\n        display: block;\n        width: min(100%, 180px);\n        height: auto;\n        border-radius: 8px;\n      }\n\n      .download-qr-card a {\n        color: var(--rp-accent-strong);\n        font-weight: 700;\n      }\n\n      .mount {\n        min-height: 120px;\n      }\n\n      .note {\n        margin-top: 18px;\n        padding: 14px 16px;\n        border-radius: 16px;\n        background: rgba(164, 17, 141, 0.06);\n        color: var(--rp-accent-strong);\n        font-size: 0.95rem;\n        line-height: 1.55;\n      }\n\n      @media (max-width: 900px) {\n        .page-shell {\n          width: 94%;\n        }\n\n        .download-qr-grid {\n          grid-template-columns: 1fr;\n        }\n\n        .docs-grid,\n        .examples-grid {\n          grid-template-columns: 1fr;\n        }\n\n        .hero {\n          padding: 24px;\n        }\n\n        .hero__brand {\n          align-items: flex-start;\n          flex-direction: column;\n        }\n      }\n    <\/style>\n    <main class=\"page-shell\">\n      <section class=\"hero\">\n        <div class=\"hero__brand\">\n          <div class=\"hero__brand-mark\">\n            <img decoding=\"async\"\n              src=\"https:\/\/roseperl.com\/nitropack_static\/HxPiIZGecEhXgsCgyDLdmCKqQPCcyJPw\/assets\/images\/optimized\/rev-024df01\/roseperl.com\/wp-content\/uploads\/2025\/11\/rp-svg-black-2.webp\"\n              alt=\"Rose Perl Technology logo\"\n            >\n          <\/div>\n          <div>\n            <p class=\"hero__eyebrow\">Rose Perl Technology<\/p>\n            <h1>RP Locator Setup Guide<\/h1>\n          <\/div>\n        <\/div>\n        <p>\n          Add the RP Locator widget to your existing store locator or website, help customers install the\n          mobile app, and let them save your store or product locator with one quick scan.\n        <\/p>\n        <div class=\"hero__chips\">\n          <span class=\"chip\">Add Your Locator<\/span>\n          <span class=\"chip\">Download The App<\/span>\n          <span class=\"chip\">Scan To Set Up<\/span>\n          <a class=\"chip\" href=\"#all-options\">All options<\/a>\n        <\/div>\n      <\/section>\n\n      <section class=\"section\">\n        <h2>Get Started In 3 Easy Steps<\/h2>\n        <p>\n          Give customers a simple path from your website to a saved locator in the RP Locator app.\n        <\/p>\n\n        <div class=\"docs-grid\">\n          <article class=\"doc-card\">\n            <h3>1. Add And Customize The Widget<\/h3>\n            <p>\n              Add the widget to your existing store locator page or website. Set your website or locator URL,\n              locator name (such as your store name), a custom message about your store, and whether it is a\n              Store or Product locator. You can also add your logo and style the widget to match your color theme.\n            <\/p>\n            <pre><code>&lt;!-- Copy and paste this where you want the widget to appear. --&gt;\n&lt;div id=\"my-qr-widget\"&gt;&lt;\/div&gt;\n\n&lt;script src=\"https:\/\/cdn.roseperl.com\/widgets\/rp-qr\/RP-QR-Widget-Prod.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    QrWidget.init({\n      target: \"#my-qr-widget\",\n\n      \/\/ Update these four settings for your locator.\n      website: \"https:\/\/your-site.com\/store-locator\",\n      name: \"Your Store Name\",\n      custom: \"Find our products near you\",\n      app: \"Store\", \/\/ Use \"Store\" or \"Product\".\n\n      \/\/ Optional branding and display settings.\n      logo: \"https:\/\/your-site.com\/your-logo.png\",\n      logoLabel: \"Your Brand Name\",\n      theme: \"brand\", \/\/ Use \"light\", \"dark\", or \"brand\".\n      color: \"#A4118D\",\n      showHeader: true,\n      showForm: false,\n      showQRPreview: false\n    });\n  });\n&lt;\/script&gt;<\/code><\/pre>\n          <\/article>\n\n          <article class=\"doc-card\">\n            <h3>2. Download The RP Locator App<\/h3>\n            <p>\n              On your phone or mobile device, click the App Store or Google Play link displayed in the widget,\n              then install the RP Locator app.\n            <\/p>\n            <div class=\"download-qr-grid\">\n              <div class=\"download-qr-card\">\n                <canvas id=\"ios-download-qr\" role=\"img\" aria-label=\"QR code to download RP Locator for iPhone or iPad\"><\/canvas>\n                <a href=\"https:\/\/apps.apple.com\/us\/app\/rp-locator\/id6770829229\">Download RP Locator for iPhone or iPad<\/a>\n                <span>Scan with your phone camera<\/span>\n              <\/div>\n              <div class=\"download-qr-card\">\n                <canvas id=\"android-download-qr\" role=\"img\" aria-label=\"QR code to download RP Locator for Android\"><\/canvas>\n                <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.roseperl\">Download RP Locator for Android<\/a>\n                <span>Scan with your phone camera<\/span>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <article class=\"doc-card\">\n            <h3>3. Scan The QR Code<\/h3>\n            <p>\n              Once the app is installed, scan the widget's QR code to set up and save the new locator in the app.\n              The locator will then be ready whenever you want to find nearby stores or favorite products.\n            <\/p>\n          <\/article>\n\n          <article class=\"doc-card\">\n            <h3>Build A More Useful Locator Collection<\/h3>\n            <p>\n              Open RP Locator and go to your saved locators whenever you need them. The more store and product\n              locators you add, the more useful your personal locator collection becomes.\n            <\/p>\n          <\/article>\n        <\/div>\n      <\/section>\n\n      <section class=\"section\">\n        <h2>Production Configuration Examples<\/h2>\n        <p>These live examples use options supported by the production widget.<\/p>\n\n        <div class=\"examples-grid\">\n          <article class=\"example-card\">\n            <h3>Customer-Facing Branded Widget<\/h3>\n            <p>\n              A polished widget for your store locator or product locator page, with your branding and a QR code\n              ready for customers to scan.\n            <\/p>\n            <div id=\"widget-header-only\" class=\"mount\"><\/div>\n            <pre><code>QrWidget.init({\n  target: \"#widget-header-only\",\n  theme: \"brand\",\n  color: \"#A4118D\",\n  logo: \"https:\/\/roseperl.com\/...\/rp-svg-black-2.webp\",\n  logoLabel: \"Rose Perl Technology\",\n  headerGeneratedQrLabel: \"Scan To Install\",\n  website: \"https:\/\/example.com\/store-locator\",\n  name: \"Rose Perl Main Store\",\n  custom: \"roseperl-demo\",\n  app: \"Store\",\n  showHeader: true,\n  showForm: false,\n  showQRPreview: false\n});<\/code><\/pre>\n          <\/article>\n\n          <article class=\"example-card\">\n            <h3>Interactive Form + Preview<\/h3>\n            <p>\n              Use this version when staff or customers should be able to enter locator details and download or\n              copy the generated QR code.\n            <\/p>\n            <div id=\"widget-full-ui\" class=\"mount\"><\/div>\n            <pre><code>QrWidget.init({\n  target: \"#widget-full-ui\",\n  showHeader: true,\n  showForm: true,\n  showQRPreview: true,\n  enableCopy: true,\n  enableDownload: true\n});<\/code><\/pre>\n          <\/article>\n\n          <article class=\"example-card\">\n            <h3>Auto Init With Data Attributes<\/h3>\n            <p>\n              Use data attributes for display and styling settings when you prefer markup-based initialization.\n            <\/p>\n            <div\n              class=\"mount\"\n              data-qr-widget\n              data-qr-title=\"Rose Perl Auto Init Example\"\n              data-qr-theme=\"brand\"\n              data-qr-color=\"#A4118D\"\n              data-qr-logo=\"https:\/\/roseperl.com\/nitropack_static\/HxPiIZGecEhXgsCgyDLdmCKqQPCcyJPw\/assets\/images\/optimized\/rev-024df01\/roseperl.com\/wp-content\/uploads\/2025\/11\/rp-svg-black-2.webp\"\n              data-qr-show-header=\"true\"\n              data-qr-show-form=\"false\"\n              data-qr-show-display=\"false\"\n            ><\/div>\n            <pre><code>&lt;div\n  data-qr-widget\n  data-qr-title=\"Rose Perl Auto Init Example\"\n  data-qr-theme=\"brand\"\n  data-qr-color=\"#A4118D\"\n  data-qr-logo=\"https:\/\/roseperl.com\/...\/rp-svg-black-2.webp\"\n  data-qr-show-header=\"true\"\n  data-qr-show-form=\"false\"\n  data-qr-show-display=\"false\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n          <\/article>\n\n          <article class=\"example-card\">\n            <h3>Customize Your App Download Links<\/h3>\n            <p>\n              The production defaults point to RP Locator in the Apple App Store and Google Play. You can also\n              customize RP Locator as your own branded app, publish it in the app stores, and update these links\n              to send customers directly to your branded app. Learn more about\n              <a href=\"https:\/\/roseperl.com\/build-an-app\/\">building a custom app with Rose Perl<\/a>.\n            <\/p>\n            <div id=\"widget-store-links\" class=\"mount\"><\/div>\n            <pre><code>QrWidget.init({\n  target: \"#widget-store-links\",\n  iosDownloadLink: \"https:\/\/apps.apple.com\/us\/app\/rp-locator\/id6770829229\",\n  googlePlayDownloadLink: \"https:\/\/play.google.com\/store\/apps\/details?id=com.roseperl\"\n});<\/code><\/pre>\n          <\/article>\n        <\/div>\n      <\/section>\n\n      <section class=\"section\" id=\"all-options\">\n        <h2>All Widget Options<\/h2>\n        <p>\n          Pass these options to <code>QrWidget.init({...})<\/code>. Only <code>target<\/code> identifies where the\n          widget is mounted; all other options customize its content, behavior, or appearance.\n        <\/p>\n\n        <h3>Locator and mount options<\/h3>\n        <div class=\"options-table-wrap\">\n          <table class=\"options-table\">\n            <thead><tr><th>Option<\/th><th>Values \/ default<\/th><th>Purpose<\/th><\/tr><\/thead>\n            <tbody>\n              <tr><td><code>target<\/code><\/td><td>CSS selector or element; default <code>null<\/code><\/td><td>Element that will contain the widget. Use a unique target for every instance.<\/td><\/tr>\n              <tr><td><code>website<\/code><\/td><td>URL string; default empty<\/td><td>Your store locator, product locator, or website URL. The generated QR code opens this URL.<\/td><\/tr>\n              <tr><td><code>name<\/code><\/td><td>Text; default empty<\/td><td>Locator name, such as a store name or product finder name.<\/td><\/tr>\n              <tr><td><code>custom<\/code><\/td><td>Text; default empty<\/td><td>Custom value or customer-facing message saved with the locator.<\/td><\/tr>\n              <tr><td><code>app<\/code><\/td><td><code>\"Store\"<\/code> or <code>\"Product\"<\/code>; inferred when omitted<\/td><td>Sets the locator type. Unknown or missing values fall back to URL detection and then Store.<\/td><\/tr>\n              <tr><td><code>autofill<\/code><\/td><td>Boolean; default <code>true<\/code><\/td><td>Reads supported page URL parameters and generates the QR automatically when all required values are available.<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n\n        <h3>Layout and appearance options<\/h3>\n        <div class=\"options-table-wrap\">\n          <table class=\"options-table\">\n            <thead><tr><th>Option<\/th><th>Values \/ default<\/th><th>Purpose<\/th><\/tr><\/thead>\n            <tbody>\n              <tr><td><code>theme<\/code><\/td><td><code>\"light\"<\/code>, <code>\"dark\"<\/code>, or <code>\"brand\"<\/code>; default <code>\"light\"<\/code><\/td><td>Selects the widget color scheme.<\/td><\/tr>\n              <tr><td><code>color<\/code><\/td><td>CSS color; default <code>#A4118D<\/code><\/td><td>Sets the accent color used by controls and highlights.<\/td><\/tr>\n              <tr><td><code>logo<\/code><\/td><td>Image URL; default RP image<\/td><td>Displays your logo in the header. When supplied, it also becomes the header image source.<\/td><\/tr>\n              <tr><td><code>logoLabel<\/code><\/td><td>Text; default <code>\"Scan to setup\"<\/code><\/td><td>Label displayed below the logo.<\/td><\/tr>\n              <tr><td><code>showHeader<\/code><\/td><td>Boolean; default <code>true<\/code><\/td><td>Shows or hides the complete header area.<\/td><\/tr>\n              <tr><td><code>showForm<\/code><\/td><td>Boolean; default <code>false<\/code><\/td><td>Shows or hides the editable locator form.<\/td><\/tr>\n              <tr><td><code>showQRPreview<\/code><\/td><td>Boolean; default <code>false<\/code><\/td><td>Shows or hides the larger QR preview card below the header.<\/td><\/tr>\n              <tr><td><code>enableDownload<\/code><\/td><td>Boolean; default <code>false<\/code><\/td><td>Adds a button for downloading the generated QR image.<\/td><\/tr>\n              <tr><td><code>enableCopy<\/code><\/td><td>Boolean; default <code>false<\/code><\/td><td>Adds a button for copying the generated locator URL.<\/td><\/tr>\n              <tr><td><code>mode<\/code><\/td><td><code>\"full\"<\/code> or <code>\"compact\"<\/code>; default <code>\"full\"<\/code><\/td><td>Reserved layout setting. The current production renderer does not apply a visual mode difference.<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n\n        <h3>Header and form text options<\/h3>\n        <div class=\"options-table-wrap\">\n          <table class=\"options-table\">\n            <thead><tr><th>Option<\/th><th>Default<\/th><th>Purpose<\/th><\/tr><\/thead>\n            <tbody>\n              <tr><td><code>headerHeading<\/code><\/td><td>Scan this QR Code to Setup your Locator<\/td><td>Main widget heading.<\/td><\/tr>\n              <tr><td><code>headerDescription<\/code><\/td><td>RP Locator download description<\/td><td>Supporting text beneath the heading.<\/td><\/tr>\n              <tr><td><code>headerInstructions<\/code><\/td><td>Download-and-scan instructions<\/td><td>Instructions shown above the app badges and QR code.<\/td><\/tr>\n              <tr><td><code>headerGeneratedQrLabel<\/code><\/td><td>Generated QR Code<\/td><td>Label beneath the generated header QR code.<\/td><\/tr>\n              <tr><td><code>headerQrAlt<\/code><\/td><td>QR code to download app<\/td><td>Alternative text for the initial header image.<\/td><\/tr>\n              <tr><td><code>headerQrImage<\/code><\/td><td>RP default image URL<\/td><td>Fallback header image when no custom <code>logo<\/code> is supplied.<\/td><\/tr>\n              <tr><td><code>formTitle<\/code><\/td><td>QR Code Generator<\/td><td>Heading above the editable form.<\/td><\/tr>\n              <tr><td><code>formSubtitle<\/code><\/td><td>Create a custom QR code for your locator setup.<\/td><td>Supporting text above the form fields.<\/td><\/tr>\n              <tr><td><code>previewTitle<\/code><\/td><td>Generated QR Preview<\/td><td>Heading above the large QR preview.<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n\n        <h3>App-store options<\/h3>\n        <div class=\"options-table-wrap\">\n          <table class=\"options-table\">\n            <thead><tr><th>Option<\/th><th>Default<\/th><th>Purpose<\/th><\/tr><\/thead>\n            <tbody>\n              <tr><td><code>iosDownloadLink<\/code><\/td><td>Empty<\/td><td>Preferred override for the Apple App Store badge destination.<\/td><\/tr>\n              <tr><td><code>googlePlayDownloadLink<\/code><\/td><td>Empty<\/td><td>Preferred override for the Google Play badge destination.<\/td><\/tr>\n              <tr><td><code>appStoreLink<\/code><\/td><td>RP Locator App Store listing<\/td><td>Default Apple badge destination when <code>iosDownloadLink<\/code> is empty.<\/td><\/tr>\n              <tr><td><code>playStoreLink<\/code><\/td><td>RP Locator Google Play listing<\/td><td>Default Android badge destination when <code>googlePlayDownloadLink<\/code> is empty.<\/td><\/tr>\n              <tr><td><code>appStoreBadge<\/code><\/td><td>RP App Store badge image URL<\/td><td>Replaces the displayed Apple badge image.<\/td><\/tr>\n              <tr><td><code>playStoreBadge<\/code><\/td><td>RP Google Play badge image URL<\/td><td>Replaces the displayed Google Play badge image.<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n\n        <h3>HTML data attributes<\/h3>\n        <p>\n          Use the display attributes on an element with <code>data-qr-widget<\/code> for markup-based\n          auto-initialization. The parent and position attributes belong on the widget's script tag.\n        <\/p>\n        <div class=\"options-table-wrap\">\n          <table class=\"options-table\">\n            <thead><tr><th>Attribute<\/th><th>Equivalent option \/ purpose<\/th><\/tr><\/thead>\n            <tbody>\n              <tr><td><code>data-qr-title<\/code><\/td><td><code>headerHeading<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-autofill<\/code><\/td><td><code>autofill<\/code>; use <code>\"true\"<\/code> or <code>\"false\"<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-mode<\/code><\/td><td><code>mode<\/code>; reserved for <code>\"full\"<\/code> or <code>\"compact\"<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-theme<\/code><\/td><td><code>theme<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-color<\/code><\/td><td><code>color<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-download<\/code><\/td><td><code>enableDownload<\/code>; use <code>\"true\"<\/code> to enable<\/td><\/tr>\n              <tr><td><code>data-qr-copy<\/code><\/td><td><code>enableCopy<\/code>; use <code>\"true\"<\/code> to enable<\/td><\/tr>\n              <tr><td><code>data-qr-logo<\/code><\/td><td><code>logo<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-show-header<\/code><\/td><td><code>showHeader<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-show-form<\/code><\/td><td><code>showForm<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-show-display<\/code><\/td><td><code>showQRPreview<\/code><\/td><\/tr>\n              <tr><td><code>data-qr-parent<\/code><\/td><td>Script-tag attribute containing a CSS selector for the automatic fallback mount's parent.<\/td><\/tr>\n              <tr><td><code>data-qr-position<\/code><\/td><td>Script-tag attribute using <code>append<\/code>, <code>prepend<\/code>, <code>before<\/code>, or <code>after<\/code> placement for the fallback mount.<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n\n        <h3>URL autofill parameters<\/h3>\n        <p>\n          With <code>autofill: true<\/code>, the page query parameters <code>website<\/code>, <code>name<\/code>,\n          <code>custom<\/code>, and <code>app<\/code> can supply locator values. Explicit JavaScript values take\n          priority. Use <code>app=Store<\/code> or <code>app=Product<\/code>.\n        <\/p>\n\n        <h3>Complete JavaScript example<\/h3>\n        <pre><code>QrWidget.init({\n  target: \"#my-qr-widget\",\n  website: \"https:\/\/your-site.com\/store-locator\",\n  name: \"Your Store Name\",\n  custom: \"Find our products near you\",\n  app: \"Store\",\n  autofill: true,\n  theme: \"brand\",\n  color: \"#A4118D\",\n  logo: \"https:\/\/your-site.com\/your-logo.png\",\n  logoLabel: \"Your Brand Name\",\n  headerHeading: \"Add Our Store To RP Locator\",\n  headerDescription: \"Keep our locator ready on your phone.\",\n  headerInstructions: \"Install the app, then scan this QR code.\",\n  headerGeneratedQrLabel: \"Scan To Add This Locator\",\n  showHeader: true,\n  showForm: false,\n  showQRPreview: false,\n  enableDownload: false,\n  enableCopy: false,\n  iosDownloadLink: \"https:\/\/apps.apple.com\/us\/app\/rp-locator\/id6770829229\",\n  googlePlayDownloadLink: \"https:\/\/play.google.com\/store\/apps\/details?id=com.roseperl\"\n});<\/code><\/pre>\n      <\/section>\n    <\/main>\n\n    <script src=\"https:\/\/cdn.roseperl.com\/widgets\/rp-qr\/RP-QR-Widget-Prod.js\"><\/script>\n    <script>\n      (function () {\n        function copyText(text) {\n          if (navigator.clipboard && window.isSecureContext) {\n            return navigator.clipboard.writeText(text);\n          }\n\n          return new Promise(function (resolve, reject) {\n            var textArea = document.createElement(\"textarea\");\n            textArea.value = text;\n            textArea.setAttribute(\"readonly\", \"\");\n            textArea.style.position = \"fixed\";\n            textArea.style.opacity = \"0\";\n            document.body.appendChild(textArea);\n            textArea.select();\n\n            try {\n              if (!document.execCommand(\"copy\")) {\n                throw new Error(\"Copy command was unavailable.\");\n              }\n              resolve();\n            } catch (error) {\n              reject(error);\n            } finally {\n              textArea.remove();\n            }\n          });\n        }\n\n        document.querySelectorAll(\"pre\").forEach(function (pre, index) {\n          var wrapper = document.createElement(\"div\");\n          var button = document.createElement(\"button\");\n          var code = pre.querySelector(\"code\");\n\n          wrapper.className = \"code-example\";\n          button.className = \"copy-code-button\";\n          button.type = \"button\";\n          button.textContent = \"Copy\";\n          button.setAttribute(\"aria-label\", \"Copy code example \" + (index + 1));\n\n          pre.parentNode.insertBefore(wrapper, pre);\n          wrapper.appendChild(pre);\n          wrapper.appendChild(button);\n\n          button.addEventListener(\"click\", function () {\n            copyText(code ? code.textContent : pre.textContent)\n              .then(function () {\n                button.textContent = \"Copied!\";\n                button.setAttribute(\"data-copied\", \"true\");\n                window.setTimeout(function () {\n                  button.textContent = \"Copy\";\n                  button.removeAttribute(\"data-copied\");\n                }, 1800);\n              })\n              .catch(function () {\n                button.textContent = \"Select code\";\n                window.setTimeout(function () {\n                  button.textContent = \"Copy\";\n                }, 1800);\n              });\n          });\n        });\n\n        var rosePerlLogo = \"https:\/\/roseperl.com\/nitropack_static\/HxPiIZGecEhXgsCgyDLdmCKqQPCcyJPw\/assets\/images\/optimized\/rev-024df01\/roseperl.com\/wp-content\/uploads\/2025\/11\/rp-svg-black-2.webp\";\n        var sharedOptions = {\n          theme: \"brand\",\n          color: \"#A4118D\",\n          logo: rosePerlLogo,\n          logoLabel: \"Rose Perl Technology\",\n          headerGeneratedQrLabel: \"Scan To Install\",\n          iosDownloadLink: \"https:\/\/apps.apple.com\/us\/app\/rp-locator\/id6770829229\",\n          googlePlayDownloadLink: \"https:\/\/play.google.com\/store\/apps\/details?id=com.roseperl\"\n        };\n\n        var widgetReady = window.QrWidget.init(Object.assign({}, sharedOptions, {\n          target: \"#widget-header-only\",\n          headerHeading: \"Add Rose Perl To Your RP Locator App\",\n          headerDescription: \"Download RP Locator, then save this store locator for easy access on your mobile device.\",\n          headerInstructions: \"Install the app using one of the links, then scan this QR code to set up your locator.\",\n          website: \"https:\/\/example.com\/store-locator\",\n          name: \"Rose Perl Main Store\",\n          custom: \"roseperl-demo\",\n          app: \"Store\",\n          showHeader: true,\n          showForm: false,\n          showQRPreview: false,\n          autofill: true\n        }));\n\n        window.QrWidget.init(Object.assign({}, sharedOptions, {\n          target: \"#widget-full-ui\",\n          headerHeading: \"Create Your Locator QR Code\",\n          headerDescription: \"Enter your store or product locator details to create a customized setup code.\",\n          headerInstructions: \"Download or copy the QR code, then share it with your customers.\",\n          website: \"https:\/\/example.com\/product-locator\",\n          name: \"Rose Perl Product Search\",\n          custom: \"Find your favorite Rose Perl products near you\",\n          app: \"Product\",\n          showHeader: true,\n          showForm: true,\n          showQRPreview: true,\n          enableCopy: true,\n          enableDownload: true,\n          autofill: true\n        }));\n\n        window.QrWidget.init(Object.assign({}, sharedOptions, {\n          target: \"#widget-store-links\",\n          headerHeading: \"Download RP Locator\",\n          headerDescription: \"Get the app for iPhone, iPad, or Android using the store links below.\",\n          headerInstructions: \"After installation, scan the QR code to add this locator.\",\n          website: \"https:\/\/example.com\/store-locator\",\n          name: \"Rose Perl Main Store\",\n          custom: \"Find Rose Perl products near you\",\n          app: \"Store\",\n          showHeader: true,\n          showForm: false,\n          showQRPreview: false,\n          autofill: true\n        }));\n\n        widgetReady.then(function () {\n          var qrOptions = {\n            width: 220,\n            margin: 2,\n            color: { dark: \"#171219\", light: \"#ffffff\" }\n          };\n\n          window.QRCode.toCanvas(\n            document.getElementById(\"ios-download-qr\"),\n            \"https:\/\/apps.apple.com\/us\/app\/rp-locator\/id6770829229\",\n            qrOptions\n          );\n          window.QRCode.toCanvas(\n            document.getElementById(\"android-download-qr\"),\n            \"https:\/\/play.google.com\/store\/apps\/details?id=com.roseperl\",\n            qrOptions\n          );\n        });\n      })();\n    <\/script>\n  \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Rose Perl Technology RP Locator Setup Guide Add the RP Locator widget to your existing store locator or website, help customers install the mobile app, and let them save your store or product locator with one quick scan. Add Your Locator Download The App Scan To Set Up All options Get Started In 3 Easy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-22536","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>RP Locator Setup Guide - Rose Perl Technology LLC<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/roseperl.com\/fr\/guide-dinstallation-du-localisateur-rp\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"RP Locator Setup Guide - Rose Perl Technology LLC\" \/>\n<meta property=\"og:description\" content=\"Rose Perl Technology RP Locator Setup Guide Add the RP Locator widget to your existing store locator or website, help customers install the mobile app, and let them save your store or product locator with one quick scan. Add Your Locator Download The App Scan To Set Up All options Get Started In 3 Easy [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/roseperl.com\/fr\/guide-dinstallation-du-localisateur-rp\/\" \/>\n<meta property=\"og:site_name\" content=\"Rose Perl Technology LLC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-10T20:56:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/roseperl.com\/wp-content\/uploads\/2025\/12\/FACEBOOK-BANNER.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"820\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/rp-locator-setup-guide\\\/\",\"url\":\"https:\\\/\\\/roseperl.com\\\/rp-locator-setup-guide\\\/\",\"name\":\"RP Locator Setup Guide - Rose Perl Technology LLC\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#website\"},\"datePublished\":\"2026-09-10T20:53:12+00:00\",\"dateModified\":\"2026-09-10T20:56:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/rp-locator-setup-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/roseperl.com\\\/rp-locator-setup-guide\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/rp-locator-setup-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/roseperl.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"RP Locator Setup Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#website\",\"url\":\"https:\\\/\\\/roseperl.com\\\/\",\"name\":\"Rose Perl Technology LLC\",\"description\":\"eCommerce Software Designed to Help Brands Scale.\",\"publisher\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#organization\"},\"alternateName\":\"Rose Perl Apps\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/roseperl.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#organization\",\"name\":\"Rose Perl Technology LLC\",\"url\":\"https:\\\/\\\/roseperl.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mlix8gzaatqh.i.optimole.com\\\/w:500\\\/h:100\\\/q:mauto\\\/f:best\\\/id:6682f0bb65612ca7e7c929eb60567ef7\\\/https:\\\/\\\/roseperl.com\\\/rp-svg-black-2.webp\",\"contentUrl\":\"https:\\\/\\\/mlix8gzaatqh.i.optimole.com\\\/w:500\\\/h:100\\\/q:mauto\\\/f:best\\\/id:6682f0bb65612ca7e7c929eb60567ef7\\\/https:\\\/\\\/roseperl.com\\\/rp-svg-black-2.webp\",\"width\":500,\"height\":100,\"caption\":\"Rose Perl Technology LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/p\\\/Rose-Perl-Technology-LLC-61576718883966\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide d'installation de RP Locator - Rose Perl Technology LLC","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/roseperl.com\/fr\/guide-dinstallation-du-localisateur-rp\/","og_locale":"fr_FR","og_type":"article","og_title":"RP Locator Setup Guide - Rose Perl Technology LLC","og_description":"Rose Perl Technology RP Locator Setup Guide Add the RP Locator widget to your existing store locator or website, help customers install the mobile app, and let them save your store or product locator with one quick scan. Add Your Locator Download The App Scan To Set Up All options Get Started In 3 Easy [&hellip;]","og_url":"https:\/\/roseperl.com\/fr\/guide-dinstallation-du-localisateur-rp\/","og_site_name":"Rose Perl Technology LLC","article_publisher":"https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/","article_modified_time":"2026-09-10T20:56:44+00:00","og_image":[{"width":820,"height":360,"url":"https:\/\/roseperl.com\/wp-content\/uploads\/2025\/12\/FACEBOOK-BANNER.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/roseperl.com\/rp-locator-setup-guide\/","url":"https:\/\/roseperl.com\/rp-locator-setup-guide\/","name":"Guide d'installation de RP Locator - Rose Perl Technology LLC","isPartOf":{"@id":"https:\/\/roseperl.com\/#website"},"datePublished":"2026-09-10T20:53:12+00:00","dateModified":"2026-09-10T20:56:44+00:00","breadcrumb":{"@id":"https:\/\/roseperl.com\/rp-locator-setup-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/roseperl.com\/rp-locator-setup-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/roseperl.com\/rp-locator-setup-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/roseperl.com\/"},{"@type":"ListItem","position":2,"name":"RP Locator Setup Guide"}]},{"@type":"WebSite","@id":"https:\/\/roseperl.com\/#website","url":"https:\/\/roseperl.com\/","name":"Rose Perl Technology LLC","description":"Logiciel de commerce \u00e9lectronique con\u00e7u pour aider les marques \u00e0 passer \u00e0 l'\u00e9chelle.","publisher":{"@id":"https:\/\/roseperl.com\/#organization"},"alternateName":"Rose Perl Apps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/roseperl.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/roseperl.com\/#organization","name":"Rose Perl Technology LLC","url":"https:\/\/roseperl.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/roseperl.com\/#\/schema\/logo\/image\/","url":"https:\/\/mlix8gzaatqh.i.optimole.com\/w:500\/h:100\/q:mauto\/f:best\/id:6682f0bb65612ca7e7c929eb60567ef7\/https:\/\/roseperl.com\/rp-svg-black-2.webp","contentUrl":"https:\/\/mlix8gzaatqh.i.optimole.com\/w:500\/h:100\/q:mauto\/f:best\/id:6682f0bb65612ca7e7c929eb60567ef7\/https:\/\/roseperl.com\/rp-svg-black-2.webp","width":500,"height":100,"caption":"Rose Perl Technology LLC"},"image":{"@id":"https:\/\/roseperl.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/"]}]}},"_links":{"self":[{"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/pages\/22536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/comments?post=22536"}],"version-history":[{"count":10,"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/pages\/22536\/revisions"}],"predecessor-version":[{"id":22547,"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/pages\/22536\/revisions\/22547"}],"wp:attachment":[{"href":"https:\/\/roseperl.com\/fr\/wp-json\/wp\/v2\/media?parent=22536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}