Use publish web widget on your website
In this section:
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 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:
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! 🥳
- 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.
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.
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.