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 Steps

Give customers a simple path from your website to a saved locator in the RP Locator app.

1. Add And Customize The Widget

Add the widget to your existing store locator page or website. Set your website or locator URL, locator name (such as your store name), a custom message about your store, and whether it is a Store or Product locator. You can also add your logo and style the widget to match your color theme.

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

2. Download The RP Locator App

On your phone or mobile device, click the App Store or Google Play link displayed in the widget, then install the RP Locator app.

Download RP Locator for iPhone or iPad Scan with your phone camera

Download RP Locator for Android Scan with your phone camera

3. Scan The QR Code

Once the app is installed, scan the widget's QR code to set up and save the new locator in the app. The locator will then be ready whenever you want to find nearby stores or favorite products.

Build A More Useful Locator Collection

Open RP Locator and go to your saved locators whenever you need them. The more store and product locators you add, the more useful your personal locator collection becomes.

Production Configuration Examples

These live examples use options supported by the production widget.

Customer-Facing Branded Widget

A polished widget for your store locator or product locator page, with your branding and a QR code ready for customers to scan.

QrWidget.init({
  target: "#widget-header-only",
  theme: "brand",
  color: "#A4118D",
  logo: "https://roseperl.com/.../rp-svg-black-2.webp",
  logoLabel: "Rose Perl Technology",
  headerGeneratedQrLabel: "Scan To Install",
  website: "https://example.com/store-locator",
  name: "Rose Perl Main Store",
  custom: "roseperl-demo",
  app: "Store",
  showHeader: true,
  showForm: false,
  showQRPreview: false
});

Interactive Form + Preview

Use this version when staff or customers should be able to enter locator details and download or copy the generated QR code.

QrWidget.init({
  target: "#widget-full-ui",
  showHeader: true,
  showForm: true,
  showQRPreview: true,
  enableCopy: true,
  enableDownload: true
});

Auto Init With Data Attributes

Use data attributes for display and styling settings when you prefer markup-based initialization.

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

Customize Your App Download Links

The production defaults point to RP Locator in the Apple App Store and Google Play. You can also customize RP Locator as your own branded app, publish it in the app stores, and update these links to send customers directly to your branded app. Learn more about building a custom app with Rose Perl.

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"
});

All Widget Options

Pass these options to QrWidget.init({...}). Only target identifies where the widget is mounted; all other options customize its content, behavior, or appearance.

Locator and mount options

Option	Values / default	Purpose
`target`	CSS selector or element; default `null`	Element that will contain the widget. Use a unique target for every instance.
`website`	URL string; default empty	Your store locator, product locator, or website URL. The generated QR code opens this URL.
`name`	Text; default empty	Locator name, such as a store name or product finder name.
`custom`	Text; default empty	Custom value or customer-facing message saved with the locator.
`app`	`"Store"` or `"Product"`; inferred when omitted	Sets the locator type. Unknown or missing values fall back to URL detection and then Store.
`autofill`	Boolean; default `true`	Reads supported page URL parameters and generates the QR automatically when all required values are available.

Layout and appearance options

Option	Values / default	Purpose
`theme`	`"light"`, `"dark"`, or `"brand"`; default `"light"`	Selects the widget color scheme.
`color`	CSS color; default `#A4118D`	Sets the accent color used by controls and highlights.
`logo`	Image URL; default RP image	Displays your logo in the header. When supplied, it also becomes the header image source.
`logoLabel`	Text; default `"Scan to setup"`	Label displayed below the logo.
`showHeader`	Boolean; default `true`	Shows or hides the complete header area.
`showForm`	Boolean; default `false`	Shows or hides the editable locator form.
`showQRPreview`	Boolean; default `false`	Shows or hides the larger QR preview card below the header.
`enableDownload`	Boolean; default `false`	Adds a button for downloading the generated QR image.
`enableCopy`	Boolean; default `false`	Adds a button for copying the generated locator URL.
`mode`	`"full"` or `"compact"`; default `"full"`	Reserved layout setting. The current production renderer does not apply a visual mode difference.

Header and form text options

Option	Default	Purpose
`headerHeading`	Scan this QR Code to Setup your Locator	Main widget heading.
`headerDescription`	RP Locator download description	Supporting text beneath the heading.
`headerInstructions`	Download-and-scan instructions	Instructions shown above the app badges and QR code.
`headerGeneratedQrLabel`	Generated QR Code	Label beneath the generated header QR code.
`headerQrAlt`	QR code to download app	Alternative text for the initial header image.
`headerQrImage`	RP default image URL	Fallback header image when no custom `logo` is supplied.
`formTitle`	QR Code Generator	Heading above the editable form.
`formSubtitle`	Create a custom QR code for your locator setup.	Supporting text above the form fields.
`previewTitle`	Generated QR Preview	Heading above the large QR preview.

App-store options

Option	Default	Purpose
`iosDownloadLink`	Empty	Preferred override for the Apple App Store badge destination.
`googlePlayDownloadLink`	Empty	Preferred override for the Google Play badge destination.
`appStoreLink`	RP Locator App Store listing	Default Apple badge destination when `iosDownloadLink` is empty.
`playStoreLink`	RP Locator Google Play listing	Default Android badge destination when `googlePlayDownloadLink` is empty.
`appStoreBadge`	RP App Store badge image URL	Replaces the displayed Apple badge image.
`playStoreBadge`	RP Google Play badge image URL	Replaces the displayed Google Play badge image.

HTML data attributes

Use the display attributes on an element with data-qr-widget for markup-based auto-initialization. The parent and position attributes belong on the widget's script tag.

Attribute	Equivalent option / purpose
`data-qr-title`	`headerHeading`
`data-qr-autofill`	`autofill`; use `"true"` or `"false"`
`data-qr-mode`	`mode`; reserved for `"full"` or `"compact"`
`data-qr-theme`	`theme`
`data-qr-color`	`color`
`data-qr-download`	`enableDownload`; use `"true"` to enable
`data-qr-copy`	`enableCopy`; use `"true"` to enable
`data-qr-logo`	`logo`
`data-qr-show-header`	`showHeader`
`data-qr-show-form`	`showForm`
`data-qr-show-display`	`showQRPreview`
`data-qr-parent`	Script-tag attribute containing a CSS selector for the automatic fallback mount's parent.
`data-qr-position`	Script-tag attribute using `append`, `prepend`, `before`, or `after` placement for the fallback mount.

URL autofill parameters

With autofill: true, the page query parameters website, name, custom, and app can supply locator values. Explicit JavaScript values take priority. Use app=Store or app=Product.

Complete JavaScript example

QrWidget.init({
  target: "#my-qr-widget",
  website: "https://your-site.com/store-locator",
  name: "Your Store Name",
  custom: "Find our products near you",
  app: "Store",
  autofill: true,
  theme: "brand",
  color: "#A4118D",
  logo: "https://your-site.com/your-logo.png",
  logoLabel: "Your Brand Name",
  headerHeading: "Add Our Store To RP Locator",
  headerDescription: "Keep our locator ready on your phone.",
  headerInstructions: "Install the app, then scan this QR code.",
  headerGeneratedQrLabel: "Scan To Add This Locator",
  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"
});

FIND US ON