Do you want to sell gift cards through your Wix website? With the Gifty widget, it’s a breeze! In this guide, you will learn step-by-step how to integrate the Gifty widget onto your Wix site. Don’t worry; you don’t need to be a tech expert to get this done. We’ve explained everything clearly so you can start selling gift cards through your Wix website in no time.
What do you need?
1.
A Wix account and a website where you want to place the module.
2.
A Gifty account. Don’t have one yet? Easily create one yourself by clicking here, or schedule a demo to learn more about Gifty.
Select the website you want to edit. (See the screenshot belowđđ»).
3.
Click on âSettingsâ at the bottom of the menu.
4.
Under âAdvancedâ, click on âCustom Codeâ.
5.
On the âCustom Codeâ page, click the blue button âAdd Custom Codeâ. (See the screenshot belowđđ»)
6.
Add the following codeđđ».
<script>
window.Gifty = { key: 'WIDGET_KEY_HERE' };
(function (e, t) {
var n = e.createElement(t);
n.async = true;
n.src = 'https://static.gifty.nl/js/widget.js';
var r = e.getElementsByTagName(t)[0];
r.parentNode.insertBefore(n, r);
})(document, 'script');
</script>
7.
Replace WIDGET_KEY_HERE with your unique integration code, which you can find in the Gifty Dashboard by clicking on âWidgetâ and then on ‘Installation’.
8.
Copy your âGifty Keyâ from the right-most column
9.
Return to Wix and give the code snippet a name, for example: Gifty order module.
10.
Under âAdd Code to Pagesâ, select: âAll Pages: Load Code Onceâ.
11.
Under âPlace Code inâ, choose: Head.
12.
Ensure the script type is set to âEssentialâ.
13.
Click âApplyâ. The Gifty widget will now be loaded on your Wix site. (See the screenshot belowđđ»)
Step 2: Open the Gifty order module via a button or link
Click on âSettingsâ at the bottom of the menu.
4.
Under âAdvancedâ, click on âCustom Codeâ.
5.
On the âCustom Codeâ page, click the blue button âAdd Custom Codeâ. (See screenshot 2)
6.
Add the following code:
<script>
function setElementAsGiftyToggle(textToFind, elementSelector = '*') {
let elements = document.querySelectorAll(elementSelector);
elements.forEach(function(element) {
if (element.textContent.trim() === textToFind) {
element.addEventListener('click', function(event) {
event.preventDefault();
Gifty.open();
});
}
});
}
// Adjust the text below to what it should be, for example: 'Buy gift card' or 'Order now!'
setElementAsGiftyToggle('Buy gift card');
</script>
7.
Give the code snippet a name you like, for example: Gifty order module trigger(s).
8.
Under âAdd Code toâ, select: âAll Pages: Load Code Onceâ or specific pages.
9.
Under âPlace Code inâ, choose: Body – End.
10.
Ensure the script type is set to âEssentialâ and Click âApplyâ. Now, all buttons or links with the text âOrder Gift Cardâ will open the Gifty order module. (See the screenshot belowđđ»)
Ready to sell gift cards?
With these steps, the Gifty gift card module is now integrated into your Wix website. Visitors can easily order gift cards through your site. Need help with the installation or want to learn more about the possibilities? Schedule a demo or contact us. We’re happy to assist you!
