{"id":866,"date":"2024-10-15T13:42:54","date_gmt":"2024-10-15T11:42:54","guid":{"rendered":"https:\/\/blog.gifty.nl\/?p=866"},"modified":"2024-10-30T13:26:25","modified_gmt":"2024-10-30T12:26:25","slug":"adding-gifty-gift-card-widget-to-your-wix-website-simple-guide","status":"publish","type":"post","link":"https:\/\/blog.gifty.nl\/en\/adding-gifty-gift-card-widget-to-your-wix-website-simple-guide\/","title":{"rendered":"Adding gift card widget to your Wix website: Simple guide"},"content":{"rendered":"\n
\n
\n\t

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.<\/p>\n<\/div>\n\n\n<\/div><\/div>\n\n\n\n

What do you need?<\/h2>\n\n\n\n
1.<\/td>A Wix account and a website where you want to place the module.
<\/td><\/tr>
2.<\/td>A Gifty account. Don’t have one yet? Easily create one yourself by clicking here<\/a>, or schedule a demo<\/a> to learn more about Gifty.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n


Step 1: Adding the Gifty order module to Wix<\/h2>\n\n\n\n
1.<\/td>Log in<\/strong> to Wix<\/a>.<\/td><\/tr>
2.<\/td>Select<\/strong> the website you want to edit. (See the screenshot below\ud83d\udc47\ud83c\udffb).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
3.<\/td>Click on \u2018Settings\u2019<\/strong> at the bottom of the menu.<\/td><\/tr>
4.<\/td>Under \u2018Advanced\u2019,<\/strong> click on \u2018Custom Code\u2019.<\/td><\/tr>
5.<\/td>On the \u2018Custom Code\u2019 <\/strong>page, click the blue button \u2018Add Custom Code\u2019.<\/strong> (See the screenshot below\ud83d\udc47\ud83c\udffb)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
6.<\/td>Add the following code<\/strong>\ud83d\udc47\ud83c\udffb. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<script>\nwindow.Gifty = { key: 'WIDGET_KEY_HERE' };\n(function (e, t) {\n    var n = e.createElement(t);\n    n.async = true;\n    n.src = 'https:\/\/static.gifty.nl\/js\/widget.js';\n    var r = e.getElementsByTagName(t)[0];\n    r.parentNode.insertBefore(n, r);\n})(document, 'script');\n<\/script><\/code><\/pre>\n\n\n\n
7.<\/td>Replace WIDGET_KEY_HERE<\/strong> with your unique integration code, which you can find in the Gifty Dashboard<\/a> by clicking on \u2018Widget\u2019<\/strong> and then on ‘Installation’<\/strong>.<\/td><\/tr>
8.<\/td>Copy your \u2018Gifty Key\u2019<\/strong> from the right-most column<\/td><\/tr>
9.<\/td>Return to Wix and give the code snippet a name, for example: Gifty order module.<\/em><\/td><\/tr>
10.<\/td>Under \u2018Add Code to Pages\u2019,<\/strong> select: \u2018All Pages: Load Code Once\u2019.<\/td><\/tr>
11.<\/td>Under \u2018Place Code in\u2019,<\/strong> choose: Head<\/strong>.<\/td><\/tr>
12.<\/td>Ensure the script type is set to \u2018Essential\u2019.<\/strong><\/td><\/tr>
13.<\/td>Click \u2018Apply\u2019<\/strong>. The Gifty widget will now be loaded on your Wix site. (See the screenshot below\ud83d\udc47\ud83c\udffb)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

<\/p>\n\n\n\n
Step 2: Open the Gifty order module via a button or link<\/h2>\n\n\n\n
\n
\n
1.<\/td>Log in<\/strong> to Wix<\/a>.<\/td><\/tr>
2.<\/td>Select<\/strong> the website you want to edit.<\/td><\/tr>
3.<\/td>Click on \u2018Settings\u2019 <\/strong>at the bottom of the menu.<\/td><\/tr>
4.<\/td>Under \u2018Advanced\u2019,<\/strong> click on \u2018Custom Code\u2019.<\/strong><\/td><\/tr>
5.<\/td>On the \u2018Custom Code\u2019<\/strong> page, click the blue button \u2018Add Custom Code\u2019.<\/strong>                                             
(See screenshot 2)<\/td><\/tr>
6.<\/td>Add the following code:<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<script>\nfunction setElementAsGiftyToggle(textToFind, elementSelector = '*') {\n    let elements = document.querySelectorAll(elementSelector);\n    \n    elements.forEach(function(element) {\n        if (element.textContent.trim() === textToFind) {\n            element.addEventListener('click', function(event) {\n                event.preventDefault();\n                Gifty.open();\n            });\n        }\n    });\n}\n\n\/\/ Adjust the text below to what it should be, for example: 'Buy gift card' or 'Order now!'\nsetElementAsGiftyToggle('Buy gift card');\n<\/script>\n<\/code><\/pre>\n\n\n\n
7.<\/td>Give the code snippet a name you like, for example: Gifty order 
module trigger(s).<\/em><\/td><\/tr>
8.<\/td>Under \u2018Add Code to\u2019, select: \u2018All Pages: Load Code Once\u2019 <\/strong>or specific pages<\/strong>.<\/td><\/tr>
9.<\/td>Under \u2018Place Code in\u2019<\/strong>, choose: Body – End.<\/strong><\/td><\/tr>
10.<\/td>Ensure the script type is set to \u2018Essential\u2019<\/strong> and Click \u2018Apply\u2019.<\/strong> Now, all buttons or links with the 
text \u2018Order Gift Card\u2019<\/em> will open the Gifty order module. (See the screenshot below\ud83d\udc47\ud83c\udffb)<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Ready to sell gift cards?<\/h2>\n\n\n\n
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<\/a> or contact<\/a> us. We’re happy to assist you!<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
What do you need? 1. A Wix account and a website where you want to…<\/p>\n","protected":false},"author":6,"featured_media":867,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/866"}],"collection":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/comments?post=866"}],"version-history":[{"count":27,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/866\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/866\/revisions\/1100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/media\/867"}],"wp:attachment":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/media?parent=866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/categories?post=866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/tags?post=866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}