{"id":1426,"date":"2025-01-14T17:25:36","date_gmt":"2025-01-14T16:25:36","guid":{"rendered":"https:\/\/blog.gifty.nl\/?p=1426"},"modified":"2025-01-14T17:27:21","modified_gmt":"2025-01-14T16:27:21","slug":"step-by-step-guide-adding-a-gift-card-order-module-to-your-webflow-website","status":"publish","type":"post","link":"https:\/\/blog.gifty.nl\/en\/step-by-step-guide-adding-a-gift-card-order-module-to-your-webflow-website\/","title":{"rendered":"Step-by-step guide: Adding a gift card order module to your Webflow website"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"gifty-intro-text\">\n\t<p>Want to start selling gift cards through your <a href=\"https:\/\/webflow.com\/login\" target=\"_blank\" rel=\"noopener\">Webflow website<\/a>? With Gifty\u2019s order module, it\u2019s easier than you think! This guide explains how to integrate the order module into your website. Even without much technical experience, you can set it up quickly. Follow the steps below to start offering gift cards today.<\/p>\n<\/div>\n\n\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What you need:<\/h2>\n\n\n\n<ul>\n<li>An active <a href=\"https:\/\/webflow.com\/login\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow website<\/a>.<\/li>\n\n\n\n<li>A Gifty account. Don\u2019t have one yet? No problem!\u00a0<a href=\"https:\/\/dashboard.gifty.nl\/settings\/module\/placement\" target=\"_blank\" rel=\"noreferrer noopener\">Click\u00a0here<\/a>\u00a0to sign up easily or schedule a <a href=\"https:\/\/gifty.nl\/en#demo-inplannen\" target=\"_blank\" rel=\"noreferrer noopener\">demo<\/a> to learn more about Gifty.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding the order module<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"819\" src=\"https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14164823\/Webflow-1-1.png\" alt=\"\" class=\"wp-image-1432\" style=\"width:338px;height:auto\" srcset=\"https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14164823\/Webflow-1-1.png 637w, https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14164823\/Webflow-1-1-233x300.png 233w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>1.<\/td><td>Log in to <a href=\"https:\/\/webflow.com\/login\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a> and click the\u00a0<strong>plus icon (+)<\/strong>\u00a0at the top left of the screen. (See the screenshot above for steps 1 and 2.)<\/td><\/tr><tr><td>2.<\/td><td>Click on\u00a0<strong>\u2018&lt;\/> Code Embed\u2019<\/strong>\u00a0and add the following code to the field:<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"wp-block-code\"><code>&lt;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)&#91;0];\n    r.parentNode.insertBefore(n, r);\n})(document, 'script');\n&lt;\/script><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>3.<\/td><td>Go to the <a href=\"https:\/\/dashboard.gifty.nl\/settings\/module\/placement\" target=\"_blank\" rel=\"noreferrer noopener\">Gifty dashboard<\/a>, log in, and click on\u00a0<strong>\u2018Order Module\u2019<\/strong>.<\/td><\/tr><tr><td>4.<\/td><td>Click on\u00a0<strong>\u2018INSTALLATION\u2019<\/strong>\u00a0and copy your\u00a0<strong>\u2018Gifty Key\u2019<\/strong>.<\/td><\/tr><tr><td>5.<\/td><td>Replace\u00a0<code>WIDGET_KEY_HERE<\/code>\u00a0with your unique integration code and click\u00a0<strong>\u2018Save and Close\u2019<\/strong>.<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">The order module is now visible on your website!<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integrating the order module into the menu or another location<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"896\" src=\"https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14170649\/webflow-2.1-1-1024x896.png\" alt=\"\" class=\"wp-image-1435\" style=\"width:393px;height:auto\" srcset=\"https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14170649\/webflow-2.1-1-1024x896.png 1024w, https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14170649\/webflow-2.1-1-300x262.png 300w, https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14170649\/webflow-2.1-1-768x672.png 768w, https:\/\/blog-storage.ams3.cdn.digitaloceanspaces.com\/app\/uploads\/2025\/01\/14170649\/webflow-2.1-1.png 1036w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>1.<\/td><td><strong>Log in to <a href=\"https:\/\/webflow.com\/login\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a><\/strong> and add an extra <strong>button or text<\/strong> where you want the order module to appear.<\/td><\/tr><tr><td>2.<\/td><td>Click the\u00a0<strong>plus icon (+)<\/strong>\u00a0at the top left of the screen.<\/td><\/tr><tr><td>3.<\/td><td>Drag the\u00a0<strong>\u2018&lt;\/> Code Embed\u2019<\/strong>\u00a0icon to the button or text where you want the order module to appear (see the screenshot above).<\/td><\/tr><tr><td>4.<\/td><td>Copy the <strong>following code<\/strong> and add it to the field:<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<pre class=\"wp-block-code\"><code>&lt;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)&#91;0];\n    r.parentNode.insertBefore(n, r);\n})(document, 'script');\n&lt;\/script>\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>5.<\/td><td>Go to the <a href=\"https:\/\/dashboard.gifty.nl\/settings\/module\/placement\" target=\"_blank\" rel=\"noreferrer noopener\">Gifty dashboard<\/a>, log in, and click on\u00a0<strong>\u2018Order Module\u2019<\/strong>.<\/td><\/tr><tr><td>6.<\/td><td>Click on\u00a0<strong>\u2018Installation\u2019<\/strong>\u00a0and copy your\u00a0<strong>\u2018Gifty Key\u2019<\/strong>.<\/td><\/tr><tr><td>7.<\/td><td>Replace\u00a0<code>WIDGET_KEY_HERE<\/code>\u00a0with your unique integration code and click\u00a0<strong>\u2018Save and close\u2019<\/strong>.<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">The order module has now been added to your desired location on your website!<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ready to sell gift cards?<\/h2>\n\n\n\n<p>With these steps, the order module has been successfully integrated into your <a href=\"https:\/\/webflow.com\/login\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow website<\/a>. Visitors can now easily order gift cards through your site. Have questions about the installation or want to explore more possibilities? Schedule a <a href=\"https:\/\/gifty.nl\/en#demo-inplannen\" target=\"_blank\" rel=\"noreferrer noopener\">demo<\/a> or <a href=\"https:\/\/gifty.nl\/en\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">contact<\/a> us. We\u2019re here to help!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What you need: Adding the order module 1. Log in to Webflow and click the\u00a0plus&#8230;<\/p>\n","protected":false},"author":6,"featured_media":1440,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/1426"}],"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=1426"}],"version-history":[{"count":9,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/1426\/revisions"}],"predecessor-version":[{"id":1444,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/posts\/1426\/revisions\/1444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/media\/1440"}],"wp:attachment":[{"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/media?parent=1426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/categories?post=1426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.gifty.nl\/en\/wp-json\/wp\/v2\/tags?post=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}