Joy's OLD widget

This article shows how you can create rewards for your customers.

Who can use Joy's Widget?

Basic features are available for: Free users.
Advanced design features are available for: Professional, Advanced, Enterprise users.

An eye-catching reward box is important in drawing customers' attention and interest in your reward program.

In this article, we will guide you on how to customize the appearance of the reward box in your store All steps are simple and straightforward. Now, let's get started!

Select Branding on the left menu > Widget Design to go to the Widget Design.

After changing the settings, you can preview them in:

Before sign in: displays pop-up before customers sign in.
After sign in: display pop-up after customers sign in.

Branding colors

At Color Branding setting, you can adjust the color of reward box on the storefront.

Template: select the template you want to use for Reward box. You can also Upload an image for reward box.

You can customize the branding color for your store at Custom:

Choose from 1 of the available styles: Shiffy, Kyoo Pal, Metapolis, Sky, Amethyst, Pun Yeta. Or customization based on Custom solid color and Custom gradient color.

Theme text color: select color for theme texts.
Theme text font: select color for theme texts.

Welcome headline:

Welcome text: Enter the text you want to display for the welcome text
Heading color: Choose any color to display for heading
Text font: Choose the font for the heading that you want to display on the rewards popup

Heading: Enter the text you want to display for the welcome text
Description: Enter the content you want to display for the description.
Text color: Choose any color to display for the heading and description of the Signup card.
Text font: Choose the font you want to display for Signup cards on the rewards popup

Call to action:

Welcome text: Enter the text you want to display for the welcome text
Heading color: Choose any color to display for heading
Text font: Choose the font for the heading that you want to display on the rewards popup

What to show:

You can easily customize the order of programs in the pop-up widget by drag-and-drop.
Switch the button on or off to display the necessary programs.
Select Reset to default to reset the settings.

You can choose the display icon of the float button on the frontend, you can also choose to upload the icon you want.
Widget button color: You can select the color for the widget button.
Aligment: you can either display the float button at the bottom right or left corner of the website.
Trigger:
- Show on all pages: Show reward popup on frontend on all pages
- Show on specific pages: Check the pages where you want the popup reward to be displayed on the frontend

Point Content

You can edit labels for point value and currency symbol's position on the live site. In order to edit other labels, go to Translations section.

Please look at your right side to preview the changes before publishing the reward box

Click Reset to default to reset labels into the default value initially.

Advanced settings:

Always show float button: Show the widget button in the frontend on all devices
Hide float button on mobile only: Hide button widget in frontend on mobile
Hide float button on all devices: hide button widget in frontend on all devices
- Auto show popup: Check to have the popup automatically display when accessing the page
- Auto show with hash: Check to have the popup automatically display when accessing the page with the hashtag entered
- Custom login link: Check to enter your custom login link for Sign-in option in the widget

2. Referrals

To show the referrals popup on the frontend, click Branding on the left menu > Referrals.

Branding colors:

Branding color: choose the background color for the Get link button.
Text color: select the text color for the Get link button.

How to show: select the popup display type for referrers on the frontend.
- Auto show refer popup: always show the popup for referrers when visiting your store.
- Show bubble teaser: show the teaser type on the frontend. When referrers click on the teaser, a refer popup will display.
- Do not show refer: no type of the refer popup is displayed on the frontend.
Title: enter the title for the refer popup.
Description: enter the content for the refer popup.
Auto close refer popup: the Referrals popup will close after the desired time. You can change the time by entering a positive number in the field.
Preview: view the refer popup before it is published.

Referral Rewards:

Icon: select an icon to show on the popup for referrers.
Title: enter the content for the popup.
Button: enter the name for the Claim your gift button.

Referral Success Notification

Icon: select an icon to show on the popup.
Title: enter the content for the popup.
Description: enter the content for the popup.
Button: enter the name of the Shop now! Button.

Signup Widget will be displayed on Thank you page of customers who have not had an account in the store yet to encourage account signup.

First, access Joy loyalty app > Branding > Signup Widget > enable Thank you page widget.

Enter the widget's content at Translation > After purchase

Edit the widget's content at After purchase and Heading.

You can use the variable {{points}} so the points earned will be automatically shown by setup at Place order.

Finally, remmber to click Save to apply the changes.

When the Signup Widget is successfully configured, if customers have ordered but not logged in to the store, the widget will be displayed as in below:

If you encounter any difficulty, please contact our support via support@avada.io.

We are happy to help you till your satisfaction!