Adding the VivaPoints widget to your website

Adding the widget is one copy and one paste. The whole job is under five minutes, and most of that is finding where your website lets you paste HTML.

Before you start

You need two things:

• Your website's address, exactly as visitors see it — example.com, or shop.example.com if the page lives on a subdomain.
• Somewhere on your site that accepts HTML. In WordPress that is a Custom HTML block; in Squarespace, a Code block; in Shopify, editing a page's HTML. If your site builder has no such thing, the widget cannot go on it.

Step 1 — turn it on and list your website

Open Website widget in your dashboard.

1. Add your website under Websites allowed to show it, one per line. Type it as example.com — no https://, no trailing slash.
2. Turn on Show the widget on my website.

Do the domain first. The widget refuses to load anywhere you have not listed, so switching it on with an empty list gives you a blank box and a confusing five minutes.

Step 2 — choose the layout

Full for a page of its own. Compact for a sidebar or footer. You can change this later without touching your website again — the snippet stays the same.

Step 3 — copy the snippet

Under Paste this into your website you will find something like:

<iframe
  data-vp-embed
  src="https://app.vivapoints.com/embed/your-business?variant=full"
  title="Your rewards"
  height="560"
  loading="lazy"
  style="border:0;width:100%;max-width:520px;display:block"
></iframe>
<script src="https://app.vivapoints.com/embed/v1.js" async></script>

Press Copy. Do not retype it — the address in the middle is specific to your business.

The second line is optional. It makes the widget resize itself to fit its contents, so the box grows when a customer signs in and shrinks when they sign out. Leave it out and the widget simply keeps the fixed height in the snippet, which still works — it just cannot shrink. If your site builder refuses to accept <script> tags, drop that line and keep the rest.

Step 4 — paste it and publish

Paste it into your HTML block and publish. That is the last time you need to touch your website.

Checking it worked

Open the page as a visitor would — not in your site builder's preview, which often renders inside a frame of its own and can confuse things. You should see the sign-in box in your colours.

Then do one real round trip:

1. Type the email address of a customer who is genuinely in your programme. Your own, if you joined.
2. Wait for the six-digit code and type it in.
3. Confirm you see their real balance.

If it works once, it works.

If you see a blank box

Almost always one of three things, in this order:

1. The website is not on your list. The address in the browser bar has to match what you listed, including www. This is the cause about nine times in ten.
2. The widget is switched off. Check the toggle is on.
3. You are previewing inside your site builder. Publish and open the real page.

If it is none of those, see Allowed domains and keeping your embed secure, which covers what the refusal actually means and how to read it.

If a customer says the code never arrives

Ask them which address they typed. The widget deliberately gives the same answer whether or not an address is in your programme — otherwise anyone could use it to discover who your customers are. So "I got no code" almost always means "that address is not the one I joined with".

Look them up on your Customers page and tell them the address on file.

Moving or removing it

Moving it to a different page is a cut and paste; nothing in your dashboard changes. Removing it is deleting the block. If you want it gone from every page at once and cannot remember where you put it, switch Show the widget on my website off — every copy stops rendering immediately.