> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmailr.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Mailr is a direct-mail marketing platform for US home-services contractors. Each postcard is personalized with an AI-enhanced image of the recipient's own home and a unique QR code that leads to a personalized landing page. Campaigns can target a neighborhood the customer draws on a map, the homes around past jobs they upload or import, or fire automatically from their CRM. Mailr does not mail an uploaded recipient list. When answering questions, prefer the exact steps and UI labels from these docs, and direct users to app.getmailr.com to sign in. For anything involving account-specific data, billing disputes, or mail that appears lost, direct the user to support@getmailr.com.

# Website embed widget

> Add Mailr's embed snippet to your own landing page so postcard scanners see a rendering of their own home, and everyone else sees a stock sample.

The embed widget puts Mailr's personalization on **your** website. When someone scans your postcard and lands on your page, the widget shows them a rendering of their own house — the same image a Mailr-hosted landing page would show — inside your branding, your offer, your form.

## What it is and who it's for

When a campaign uses **"Your own landing page"** instead of a Mailr-hosted one, each postcard's QR code sends the scanner to your page with a personal code in the URL (`?mailr=…`). The widget reads that code and renders that visitor's home.

* **Visitors who didn't scan a postcard see a stock sample home** — never another household's imagery. A home's rendering is only ever shown to that home.
* **One snippet is account-wide.** It works on any page and any campaign. Set it up once and forget it.
* **Scan tracking works with or without it.** The scan is recorded before the visitor ever reaches your page, so embedding is purely additive.

It's built for contractors who already have a website or funnel and want their own branding on it — and for the agencies and AI site builders who maintain those pages.

<Note>
  Widget views are **not** QR scans. A visitor who opens your page without a postcard code sees the sample home and is counted as nothing at all. Your scan numbers on the [Tracking dashboard](/results/dashboard) come from the QR code itself.
</Note>

## Get your snippet

In the campaign wizard, at the landing page step, choose **"Your own landing page"** and enter your **Landing page URL** (for example `https://yourcompany.com/postcard-offer`). Mailr then shows both snippet pieces with Copy buttons and your account's embed key already filled in. In-app copy:

> *"Optional: show each scanner their own house on your page. People who scan your postcard see a rendering of their own home. Everyone else sees a stock sample home… One snippet works on every page and every campaign — set it up once and forget it."*

See [Create a campaign](/campaigns/create-a-campaign) for the rest of that step, and [Landing pages](/results/landing-pages) for the Mailr-hosted alternative.

## The snippet

Two pieces. Put the `<div>` where you want the image, and the loader script once anywhere on the page.

```html theme={null}
<!-- 1. WHERE the widget should appear -->
<div data-mailr-widget="render" data-org="<your-org-key>"></div>

<!-- 2. The loader — once per page, anywhere (footer or head HTML is fine) -->
<script src="https://app.getmailr.com/embed.js" async></script>
```

If your builder gives you a real custom-HTML block, the one-line form does both jobs at once:

```html theme={null}
<script src="https://app.getmailr.com/embed.js" data-mailr-widget="render" data-org="<your-org-key>" async></script>
```

Always copy the version Mailr shows you in the wizard — your embed key is already filled in there.

## Every option, in plain English

Put these on whichever element declares the widget: the `<div>`, or the `<script>` tag in the one-line form.

| Attribute           | Values                                                         | What it means for you                                                                                                                                                                                       |
| ------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-mailr-widget` | `render` (`transform` is an old name that does the same thing) | Marks the spot where the personalized image goes. It shows the **digital rendering** of the home with a "DIGITAL RENDERING" pill. The raw street-level photo is never shown.                                |
| `data-org`          | your account's embed key                                       | Identifies your Mailr account. The wizard fills this in — copy it exactly as given. It's also what lets visitors with no scan code see your stock sample home.                                              |
| `data-campaign`     | a campaign id                                                  | **Legacy.** Still accepted, but it no longer changes what non-scanners see — all demos now show the stock sample home. Safe to leave off.                                                                   |
| `data-aspect`       | any CSS aspect ratio; default `16 / 10`                        | The shape of the image frame. Use `1 / 1` for a square or `4 / 3` for a boxier frame.                                                                                                                       |
| `data-radius`       | any CSS length; default `12px`                                 | How rounded the corners are. Use `0` for square corners.                                                                                                                                                    |
| `data-fallback`     | an image URL, or `none`                                        | Controls what visitors **without** a scan code see. Give an image URL to show your own picture instead of Mailr's stock sample. Set `none` to show nothing at all. Leave it off to keep the default sample. |

## Where to paste it, by site builder

| Your site is built on                                                     | What to do                                                                                                                                                                                 |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **HubSpot**                                                               | Rich text strips `<script>`. Use the two-piece form: add the `<div>` through the source-code view (`</>`) in any rich-text block, and the script in **Settings → Advanced → Footer HTML**. |
| **WordPress**                                                             | One-line form in a **Custom HTML** block, or the HTML element in Elementor, Divi or Beaver Builder.                                                                                        |
| **Webflow**                                                               | One-line form in an **Embed** element. Custom code needs a paid site plan.                                                                                                                 |
| **Squarespace**                                                           | One-line form in a **Code block**. Needs the Business plan or higher.                                                                                                                      |
| **Unbounce, Instapage, Leadpages, ClickFunnels, Carrd (Pro)**             | Custom HTML/JS element — the one-line form works as-is.                                                                                                                                    |
| **GoHighLevel**                                                           | In the funnel or website builder, one-line form in a **Custom JS/HTML** element; or the two-piece form with the script in the footer tracking code.                                        |
| **AI-built or hand-coded pages** (Lovable, v0, Bolt, Claude Code, custom) | Both forms work. React or Vite: `<div>` in the component, script at the end of `index.html`. Next.js: `<div>` in the page, loader in the root layout.                                      |
| **Wix and Google Sites**                                                  | **Not supported.** Their Embed HTML blocks sandbox the code on a different origin, so it can never see the scanner's code. Point those campaigns at a Mailr-hosted landing page instead.   |

## Hand it to your AI builder

If someone else built your site with an AI tool, this is usually the fastest path. Copy this, fill in the three placeholders, and paste it into Claude, ChatGPT, Cursor, Lovable or v0:

```text theme={null}
Add the Mailr personalization widget to my landing page at <YOUR PAGE URL>.

1. Place this where the hero image should be:
   <div data-mailr-widget="render" data-org="<YOUR ORG KEY>"></div>
2. Load this script once per page, anywhere (footer is fine):
   <script src="https://app.getmailr.com/embed.js" async></script>

Rules:
- Do not change or remove the data-mailr-widget or data-org attributes.
- Keep the ?mailr= query parameter intact through every redirect and internal link.
- Do not lazy-load, defer behind consent, or render the div inside an iframe.
- Optional styling attributes on the div: data-aspect (default "16 / 10"),
  data-radius (default "12px"), data-fallback (an image URL, or "none").
```

## Gotchas

<AccordionGroup>
  <Accordion title="The ?mailr= code must survive your redirects">
    Http-to-https, adding or dropping `www`, trailing slashes — each one is a redirect that can strip the query string. Most platforms preserve it. If yours doesn't, the visitor just sees the sample home; scan tracking is unaffected.
  </Accordion>

  <Accordion title="Publish first, then test">
    Builder previews often don't run custom scripts. Publish the page before you judge whether the widget works.
  </Accordion>

  <Accordion title="Test it without mailing anything">
    Open `https://your-page.com/your-path?mailr=<any real tracking code>` — that's exactly what a scanner's browser does. Then open the page in a fresh incognito window with no code to see what everyone else sees. Moving between pages on your site keeps the personalization for that tab.
  </Accordion>

  <Accordion title="Old snippets left in a footer are harmless">
    If the page has a widget `<div>`, widget attributes on script tags are ignored — the old tag just acts as the loader.
  </Accordion>

  <Accordion title="Nothing is showing">
    Open your browser's console at the **Verbose** level and look for a `[mailr]` line explaining the state. No `[mailr]` line at all means the script never ran, which means your builder stripped or sandboxed it — check the table above for your platform.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Create a campaign" icon="square-plus" href="/campaigns/create-a-campaign">
    Choose "Your own landing page" and grab the snippet.
  </Card>

  <Card title="Landing pages" icon="layout-template" href="/results/landing-pages">
    The Mailr-hosted option, and what it does for you.
  </Card>

  <Card title="Tracking dashboard" icon="chart-line" href="/results/dashboard">
    Where scans and leads are counted.
  </Card>

  <Card title="Contact support" icon="life-buoy" href="/resources/contact-support">
    Stuck on a builder that isn't listed here.
  </Card>
</CardGroup>