Create and Configure Gift Voucher Widget in Travelify
This tutorial guides you through creating a Gift Voucher widget using Travelify and integrating it into your website.
Go to www.travelify.io
1. Introduction
You will learn how to add multiple voucher options, configure their details, and embed the widget for customer use. Before starting, ensure you have access to your Travelify account and website administration panel.
2. Open Widget Directory
Click "Widget Directory" to access the list of available widgets.
3. Start typing in the searchbox to locate the voucher widget
Start typing in the searchbox to locate the voucher widget
4. Select the Gift Voucher widget
Select the Gift Voucher widget
5. Add New Widget
Click "Add new widget" to start creating a new Gift Voucher widget
6. In the Layout tab scroll down to Template Layout and select Gift Voucher Mode from the dropdown
In the Layout tab scroll down to Template Layout and select Gift Voucher Mode from the dropdown. This will give you the template for you to add your own denominations to
7. Give the voucher a name so you can easily identify it
Give the voucher a name so you can easily identify it. This is especially useful if you intend to add multiple vouchers
8. To add your denominations you now need to go to the Content tab
To add the denominations you wish to offer as Gift Voucher options, you now need to go to the Content tab
9. Add New Item
Click "ADD ITEM" to create a new gift voucher item.
10. Select Item Field
Click here to focus on the item code field.
11. Enter a Reference number to give each denomination a unique reference
Enter a Reference number to give each denomination a unique reference, we have used "00050" as an example to identify the £50 voucher.
12. Enter Item Title
Fill in the title, for example "£50 Gift Voucher" to name the voucher.
13. Enter Item Description
Fill in the description, for example "£50 Gift Voucher to spend on your holiday" to describe the voucher.
14. Select Currency
Click "GBP" to set the currency for the voucher, amend this to whichever currency you wish to use, using the three letter country code
15. Enter Voucher Amount
Fill in the amount with "50" to specify the voucher value.
16. Save Voucher Item
Click "Save" to save the £50 gift voucher item.
17. Continue adding as many other denominations as you wish in the same way
Continue adding as many other denomination options as you wish, in the same way, up to a maximum of six different options
18. You can see here the other denominations have been added
You can see here the other denominations have been added and how they will appear on the finished widget
19. Here are the contact detail templates that will appear on the voucher, these cannot be amended
Here are the contact and recipient details format that will appear on the voucher, these cannot be amended.
20. Voucher format
21. Once you have added all your voucher amounts you can click Save
Once you have added all your voucher amounts you can click Save to confirm the changes
22. You can make styling changes to the Gift Voucher
You can make styling changes to the Gift Voucher
23. By using the Styling tab you can make changes to the colours on your Gift Voucher
By using the Styling Tab you can make changes to the colours on your Gift Voucher, enabling you to match it to your company branding
24. Browse Style Categories
25. Styling
26. Once you have made any edits to the styling Save to confirm the changes
Once you have made any edits to the styling, click "Save" to confirm the changes. You have now completed creating and configuring the Gift Voucher widget, ready for use on your website.
27. Now we need to add the Gift Voucher widget to your website
Now we need to add the Gift Voucher widget to your website. Click "Add to website"
28. Scroll down to Widget Installation Code
Scroll down to Widget Installation Code and click "Copy"
29. Go to your Site Editor to add the widget
Go to your Site Editor to add the widget. Choose the page you wish to place the Gift Voucher widget
30. Click on Widgets
Click on Widgets
31. Select HTML
Select HTML
32. Paste the HTML code you copied from Travelify
"Paste" the HTML code you copied from Travelify
33. Click Update to save the newly added widget
Click "Update" to save the newly added widget
34. Refresh the page to see the added Gift Voucher widget
Refresh the page to see the added Gift Voucher widget
35. This is how the Gift Voucher option should look
This is how the Gift Voucher option should look on your website
36. Gift voucher option on website
37. Gift voucher option on website
You have successfully created a Gift Voucher widget with multiple voucher options and integrated it into your website.
For further customisation, explore styling options or add more voucher items as needed.
VIDEO TRAINING - This Guide will walk you through the process of creating a new Role in Travelify.
VIDEO TRAINING - This Guide walks you through the process of creating a New User in Travelify
VIDEO TRAINING - Learn how to efficiently add a Promotion Code in Travelify
VIDEO TRAINING - Learn how to efficiently complete the process of adding a Voucher Code in Travelify
VIDEO TRAINING - This Guide will walk you through the process of using the Order Manager in Travelify
VIDEO TRAINING - Explore this Guide to efficiently navigate the CRM feature in Travelify
VIDEO TRAINING - This Guide will walk you through the process step-by-step to efficiently add Suppliers to your platform.
VIDEO TRAINING - This Guide will walk you through setting up Standard Pricing Rules for Accommodation in Travelify
VIDEO TRAINING - Explore the comprehensive Guide to utilising Pricing Rules in Travelify
VIDEO TRAINING - This Guide will walk you through configuring Standard Pricing Rules for Dynamic Packages in Travelify