JavaScript.

Install the order module with a few lines of code on any website. You can embed the order module in various ways.

You sell most gift cards by adding "Gift Card" to the main menu of your website so that it is always visible. The code below opens the order module on top of your website.

  • Put the code below between the <body> and </body> tag in the HTML code of your website.
          
            
<script>
window.Gifty = { key: 'WIDGET_KEY_HERE', trigger: false };
(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>

          
      
  • Set the code below as a HREF link to open the order module on top of the current page.
          
            
<a href="javascript:Gifty.open();">Gift Card</a>

          
      
Recommended

Open via a link or button

Do you want to create a page with information about your gift card, and place a button on it that opens the order module? Then use this option. You decide how you open the order module, and you can create your own page that is easily found in search engines. Do not forget to make the page visible in the menu of your website.

  • Put the code below between the <body> and </body> tag in the HTML code of your website.
          
            
<script>
window.Gifty = { key: 'WIDGET_KEY_HERE', trigger: false };
(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>

          
      
  • Open the order module by calling Gifty.open();. This can be done behind a button, or in your own script.
          
            
<a href="javascript:Gifty.open();">Buy Gift Card</a>

          
      

Open via the gift icon

Use this option if you want to place the order module as a gift icon on top of your entire website. A gift icon appears on every page. When the icon is clicked, the order module opens.

  • Put the code below between the <body> and </body> tag in the HTML code of your website.
          
            
<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>

          
      

Embedded in a page

If you want to embed the order module on a specific page within the content, use this option. Make sure “Gift Card” is visible in the menu of your website to navigate to this page.

  • Put the code below between the <body> and </body> tag in the HTML code of your website.
          
            
<script>
window.Gifty = { key: 'WIDGET_KEY_HERE', trigger: false };
(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>

          
      
  • Place the code below where you want to display the order module.
          
            
<div data-gifty></div>

          
      

Setting the language

The order module will define its language based on the users browser locale by default. We recommend to keep this logic in place so that the user sees the order module in the language it expects.

In some cases you want to define the language yourself. For example when your website is offered in just a single language or when you have a language setting in your own site.

  • Add the language key to your embed script. Supported values are 'en', 'nl', 'de' and 'fr'.
          
            
<script>
window.Gifty = {
	key: 'WIDGET_KEY_HERE', 
	// ADD THIS KEY BELOW
	language: 'en'
};
(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>

          
      

Add products to cart

It's possible to add products to the order directly from your website. You can place a gift card in the shopping cart with a free amount or a pre-set package deal.

After adding a product, the order module will open (if it is not already open) and the order page in the order module will be displayed.

  • Adding a gift card worth €25.00 via a link
          
            
<a href="javascript:Gifty.addToCart({
    type: 'gift-card',
    value: 2500,
    quantity: 1
})">Add Gift Card worth €25.00</a>

          
      
  • Adding a gift card worth a 'Dinner Deal' package via a link
          
            
<a href="javascript:Gifty.addToCart({
    type: 'gift-card-package',
    value:'gp_PACKAGE_ID_HERE',
    quantity: 1
})">Add Dinner Deal</a>

          
      
If you want to add a package deal, you will need the ID of the package. You can find this through the API or via the Gifty dashboard by editing a package deal. You will find the ID in the URL of the page. The ID always starts with gp_.
language