Use publish web widget on your website

In this section:

1: Web widget
2: Installation
3: Configuration
4: Use case - Unbounce
5: Sign up/ Subscribe form
6: Referral widget

Imagine you want to assign and display unique codes to customers visiting one of your landing pages. With the Voucherify web widget, it's easy as 1-2-3.

The widget allows you to place a small form on your website. It looks like this one:

Widget example

Then, the flow goes as follows:

A customer lands on your page.
They fill in all the necessary details.
After clicking GET VOUCHER, a unique coupon from a defined campaign (see Configuration) is displayed to the customer.
Behind the scenes, Voucherify creates a customer profile with provided details and assign the displayed code to this profile.

Installation ⬇️

To install the widget, you have to include the following JavaScript snippet in your site:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/rspective/voucherify.js@latest/dist/voucherify.min.js"></script>

Now, go to the Project Settings to:

Get your authorization keys (you need them for the snippet below).
White list your domain.
Enable client-side publication.

As presented below:

Installing web widgets

Then, in the following snippet: replace YOUR-CLIENT-APPLICATION-ID-FROM-SETTINGS and YOUR-CLIENT-TOKEN-FROM-SETTINGS with your values, select which fields are required and choose a campaign name which will feed this widget with coupons.

<div class="voucherify-get-voucher"
     data-client-app-id="YOUR-CLIENT-APPLICATION-ID-FROM-SETTINGS"
     data-client-token="YOUR-CLIENT-TOKEN-FROM-SETTINGS"
     data-email-required="true"
     data-campaign="Campaign name"></div>

The last step is to paste this script in the page. This is it! 🎉

Configuration 🔧

You can add as many fields as you want from the following list of supported inputs:

"name",
"email",
"phone",
"line_1",
"line_2",
"city",
"postal_code",
"state",
"country"

For example, the following configuration shows the widget with a mandatory email field and an optional name field

<div class="voucherify-get-voucher"
     data-client-app-id="YOUR-CLIENT-APPLICATION-ID-FROM-SETTINGS"
     data-client-token="YOUR-CLIENT-TOKEN-FROM-SETTINGS"
     data-email-required="true"
     data-name-required="false"
     data-campaign="Campaign name"></div>

💡 If you want to customize the widget even more, show your developers the widget documentation.

Use case - Unbounce

Follow this section to see how to add a widget form on your landing page and publish a code step by step.

1

Enable client-side publications in Voucherify and add your Unbounce URL address as presented in the Installation section. In the next step, open a landing page and start editing.

2

Place the JS script at the end of the page <body> tag.

3

In the next step, add the HTML box with a widget in a desired place on the page (remember to define a campaign name and client-side keys).

4

When you save changes and republish the page, a widget is going to be visible on the screen

5

Now, let's assume that your client wants to publish a code. All they have to do is enter the required data into the fields and click GET VOUCHER.

6

In response, a code from the chosen campaign appears on the screen, and from now on it's assigned to a particular customer in the Voucherify dashboard.

By placing subscribe/sign up form on your landing page, you can capture customers' emails in Voucherify. Each new subscriber gets the unique ID assigned to their data and can be viewed in Customers view.

1

Enable client-side customer creation in the Project Settings and add your URL address.

Project settings for widgets

2

Place the JS script at the end of your landing page <body> tag (See the Installation section).

3

In the next step, add the subscribe form by placing a widget iframe on your landing page

<div class="voucherify-subscribe"
     data-client-app-id="YOUR-CLIENT-APPLICATION-ID-FROM-SETTINGS"
     data-client-token="YOUR-CLIENT-TOKEN-FROM-SETTINGS"

     data-name-field="true"
     data-name-field-required="false"
     data-name-field-label="Name"

     data-email-field="true"
     data-email-field-required="true"
     data-email-field-label="Email"

     data-subscribe-label="Subscribe to the list"

     data-source="Landing_Page_1"
     data-metadata="{'example': true, 'lang': 'eng'}"></div>

💡 Note: Remember to replace respective places in the code with your client-side API keys.

4

See the Configuration section, and learn how to change visible and required fields.

5

When the widget is ready, save your edits and republish the page.

From now on, every time a new page visitor submits the form, Voucherify creates the one-off customer's profile with his/her data 👨

In case that subscriber already exists in your Voucherify database, appropriate notification appears on the screen

Widgets are a simple and fast solution you can take from Voucherify docs to make subscribe or redeem forms on your landing page.

Use publish web widget on your website

In this section:

Web widget 💻

Installation ⬇️

Configuration 🔧

Use case - Unbounce

Sign up/ Subscribe form ✅

Referral widget