How to configure the design of your widget

You decide what your widget shows and how it looks in the widget editor. That's also where you choose where it sits on your web page and whether it opens by itself, so go through both tabs before you put the widget live.

Open the widget editor

1. Go to Apps → Widget.
2. Click View on your widget and then Edit widget. Or click Add widget, which creates a new widget and opens the editor straight away.

The editor shows the widget's pages on the left, a preview in the middle and the settings on the right. It has 2 tabs, Content and Styling. Nothing is live until you click Save changes. Back leaves the editor, and asks first if you have unsaved changes.

Under Actions you can rename the widget with Edit name and go back to an earlier version with Show version history.

Pages

The Pages panel lists the widget's 3 pages:

• Overview, the start page, with the elements you add.
• Request a code, where a contact enters their email address to log in. Show login page switches logging in off altogether: the login button and the buttons to claim a reward disappear, and the Referral element no longer shows to anyone.
• Register, where a new contact signs up. Show register page decides whether the request-a-code page offers a link to sign up.

Contacts log in with a 6-digit code from your login email, the same email the contacts portal sends. A contact who signs up through the widget gets your register email. Both are set up in your account settings: click the gear icon at the top right of the dashboard to open Settings, then click Contact touchpoints under Communication. Only admins see Contact touchpoints. See Login and register emails for your contacts.

Content: the widget elements

On the Content tab, drag elements from Widget elements on the right into the Overview page. A new widget starts with the Loyalty element already on it. Click an element in the preview to open its settings on the right, or edit its titles and button text right in the preview. Hover over an element to get the arrows that move it up or down.

There are 6 elements. Announcement can be added as often as you like. The others can each be on a widget once. Once an element is on the page, Widget elements marks it Already in use.

• Loyalty: your rewards and the contact's points. Anyone can browse the rewards. Logged-in contacts can claim one with their points, and see how many points they still need for the ones they can't afford yet. It shows the rewards that their visibility filters allow on the widget, at the widget's business profile. A reward you've just created or changed can take up to an hour to appear.
• Giftcard: a gift card shop. Choose the program under Select giftcard program, and optionally a Giftcard image. Until you pick a program, the preview shows Configuration missing and the widget on your website leaves the element out. See Selling gift cards online.
• Referral: a personal referral link, which logged-in contacts can copy or send by email. Set the Invitation email subject and Invitation email contents of that email, and add an image with Show image. Contacts who aren't logged in don't see this element at all, because the link is personal to each contact. The editor warns you while Referrals is switched off for your account.
• Subscription: a sign-up for your newsletter or another subscription. Choose which under Subscription type. Until you do, the preview shows Configuration missing and the widget on your website leaves the element out.
• Contact form: a form contacts use to send you a message. Messages go to the Email address you enter.
• Announcement: an image with a button that links to the URL you enter.

When a contact claims a digital reward, the widget shows its code and emails it to them as well. A physical reward gets a date to pick it up by, and the contact confirms the pickup in the widget at your shop.

Remove an element

Every element can be removed, Loyalty included.

1. On the Content tab, click the element in the preview. Its settings open on the right.
2. Click Delete element, under the element's settings.
3. Click Save changes.

Already in use in the Widget elements list only means the element is on the page. It doesn't stop you from deleting it.

A widget with only some elements

Delete the elements you don't want and keep the ones you do. Two combinations work differently from what you might expect:

• Only referrals. Delete Loyalty and keep Referral. Leave Show login page on, because contacts have to log in before they see their link. Someone who isn't logged in sees the widget's title and the login button, and nothing else.
• Only a gift card shop. Make Giftcard the only element and switch off Show login page and Show register page. Anyone can then buy a gift card without logging in.

Styling

The Styling tab has 5 sections:

• Title: the Title and Subtitle in the widget's header, and a Popup message that appears next to the closed widget. The popup message only shows on computers, not on phones.
• Position on web page: Left or Right, the Horizontal offset and Vertical offset, and Open widget by default. A new widget is set to Open. Set it to Closed if you'd rather contacts open it themselves.
• Color theme: your Brand color. The widget works out the rest of its colors from it.
• Font: pick one of the fonts in your brand kit. Upload custom font takes you to the brand kit to add one.
• Widget icon: the icon contacts click to open the widget. Pick one of the System icons, or switch on Pick a custom icon and upload an Image.

The widget's other settings

Outside the editor, the widget's page has a menu on the left: Information, then Installation, Domain and Advanced under Setup, and Business profile and Payments under Settings.

• Installation has the code for your website, Domain limits the widget to your own website, and Advanced has the commands to open the widget from your own buttons. See How to install the loyalty widget on your website.
• Business profile: the widget shows the rewards available at this business profile, and registers reward claims and gift card purchases on it.
• Payments: the payment integration for gift cards bought through the widget. When you've set a default payment provider, that provider takes the payments instead. You set it in your account settings: click the gear icon at the top right of the dashboard to open Settings, then click Payment provider under Account. Only admins see Payment provider.

Under Actions on the same page you can Duplicate or Delete the widget.