Skip to content
Open platform (opens in a new tab)

Embed program widgets

Add program widgets to your store with Shopify theme blocks, a new Shopify page, or the Cevoid script for program widgets and one element per widget.

View as Markdown (opens in a new tab)

Embed a program widget to show your loyalty program on your store. On Shopify, add it in the theme editor, with no code. On other platforms, add the Cevoid script for program widgets and an element wherever a widget goes.

Navigate to Loyalty → On-site widgets⁠ to embed your program widgets. Open a widget and click Embed in the top right corner of the widget editor to see your embedding options. Embed checks that your plan includes the widget and, on Shopify, that the Cevoid: Loyalty & Rewards⁠ app is installed on your store.

How embedding works

A program widget on your store needs two things:

  • The Cevoid script for program widgets: Loaded on the page. On Shopify, every block and section of the Loyalty app loads it, so no app embed is needed. On other platforms, see Add the Cevoid script for program widgets. Review widgets, galleries, and cards use scripts of their own.
  • A placement: A Shopify block or section, or an element that carries the widget's ID

On Shopify, each block and section of the Loyalty app also signs members in with their store account, so logged-in customers see their own membership. To connect your store, see Shopify. Everything else lives in the widget: saving a widget in Cevoid updates it on your store.

Embed a widget on Shopify

Add widgets with the theme blocks from the Cevoid: Loyalty & Rewards⁠ app, without writing any code. The Embed widget dialog shows the steps for your theme: an Online Store 2.0 theme (Automatic) or a vintage theme (Vintage).

  1. Navigate to Loyalty → On-site widgets⁠ and open the widget
  2. Click Embed. Embed widget opens.
  3. Click Embed to store under Embed with Shopify. The Shopify theme editor opens.
  4. Navigate to the page where you want the widget
  5. Click Add section or Add block
  6. Select the Apps tab
  7. Search for Cevoid and select the block for the widget
  8. Click Save in the Shopify theme editor

Each block shows your widget of that type, so it has no settings to fill in. Most blocks have the widget's name in Cevoid:

Block in ShopifyWidget in Cevoid
Full programFull landing page
TiersTier cards
Hero, About, Account summary, My account, My rewards, Activities, Redeemable rewards, Tier progress, FAQThe widget with the same name

There's no Purchase incentives block. On an Online Store 2.0 theme, the Purchase incentives section shows only inside Full program.

A vintage theme has no app blocks, so Cevoid adds a Cevoid section to your live theme for each widget you embed.

  1. Navigate to Loyalty → On-site widgets⁠ and open the widget
  2. Click Embed. Embed widget opens.
  3. Click Embed to store under Embed with Shopify. Cevoid adds the widget's section to your live theme and opens the Shopify editor.
  4. Select the page you want to add the widget to
  5. Click Add section and search for Cevoid
  6. Select the widget's section, such as Cevoid Program Hero
  7. Click Save in the Shopify editor

The section names are Cevoid Program Hero, Cevoid Program About, Cevoid Account Summary, Cevoid My Account, Cevoid My Rewards, Cevoid Program Activities, Cevoid Redeemable Rewards, Cevoid Program Tiers, Cevoid Tier Progress, Cevoid FAQ, Cevoid Purchase Incentives, and Cevoid: Program Landing for the Full landing page.

Adding a section needs the app's permission to edit your store's content. Without it, Insufficient Access Permissions opens instead: click Update access scopes and approve the change in Shopify.

Embed the Full landing page on Shopify

The Full landing page can go on a new page that Cevoid creates for you, or on a page you already have. Its embed dialog is Embed landing page.

On a new page:

  1. Navigate to Loyalty → On-site widgets⁠ and open Full landing page
  2. Click Embed. Embed landing page opens.
  3. Click Create new page under Embed on a new page. Cevoid creates and publishes a page named after your program, and opens the Shopify theme editor with the Full program block added.
  4. Click Save in the Shopify theme editor

Cevoid creates this page once per store. A second try fails with "Failed to generate page, could it be that you already have generated this page?"

On an existing page: Under Embed on existing page, click Embed to store, then add the Full program block (or, on a vintage theme, the Cevoid: Program Landing section) as in Embed a widget on Shopify.

Create new page, and Embed to store on a vintage theme, need the app's permission to edit your store's content. Without it, Insufficient Access Permissions opens: click Update access scopes and approve the change in Shopify.

Embed with code

Note:

This setup needs access to your site's code, and server-side code if members sign in with your own login. If you don't edit your site yourself, share these steps with your developer.

For non-Shopify platforms or headless setups, embed widgets with code. The Embed with code part of the embed dialog has both snippets, with your widget's ID filled in. The page needs the Cevoid script for program widgets, under 1. Add Cevoid script: see Add the Cevoid script for program widgets.

  1. Navigate to Loyalty → On-site widgets⁠ and open the widget
  2. Click Embed
  3. Under 2. Add widget code, copy the widget code and paste it where you want the widget to appear.
  4. Publish the changes to your site

The widget code for a single widget names the widget and its section:

<div class="cevoid-widget" data-id="…" data-section="hero" data-type="engage"></div>

The Full landing page has no data-section:

<div class="cevoid-widget" data-id="…" data-type="engage"></div>

How members sign in depends on your authentication method. Cevoid's email code sign-in needs no extra code. To sign members in with your own login, see Custom customer authentication.

Shopify customer accounts

All widgets work with both Shopify legacy customer accounts and new customer accounts for authentication.

Check that a widget is live

A program widget shows Live on its card when it loaded on your site in the last 10 days, and Not live otherwise.

  1. Navigate to Loyalty → On-site widgets⁠
  2. Hover over Live or Not live on the widget's card. The page where the widget last loaded shows, or "Widget has not been loaded yet".
  3. Optional: Click the page in the tooltip to open it