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.
He/she fills 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, he/she has to do is put 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 his/her 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