How to use web widget on my website to publish promo codes?

In this section:

1

Web widget

2

Installation

3

Configuration

4
Use case - Unbounce
5
Sign up/ Subscribe form
6
Referral widget

Web 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:

  1. Get your authorization keys (you need them for the snippet below).
  2. White list your domain.
  3. 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).

Adding web widget

4

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

Publishing a web widget

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.

Publishing code to a customer

 You can see all publications and clients data gathered in your user account. That's it! 🥳
 

Publication history overview

Sign up/ Subscribe form ✅

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.

Sign up test widget

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

widget

Referral widget

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