Account Schedule a Demo
Back
Back
Back

Adding Gifty gift card widget to your Wix website: Simple guide

To overview |
Date 15/10/2024 | By Robbin van Gifty

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.


Step 1: Adding the Gifty order module to Wix

1.Log in to Wix.
2.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

1.Log in to Wix.
2.Select the website you want to edit.
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 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!

Also see these articles

`