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:

Then, the flow goes as follows:

  • a customer lands on your page
  • he/she fills in 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:

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

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


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.

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

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.