Order Widget Integrations REST API
language
Login
menu

JavaScript.

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

Open from site navigation

You sell most gift cards by adding "Gift Card" to the main menu of your website so that it is always visible.
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.

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. You place the icon on the left or right side of the screen.

Embedded in a page

If you want to embed the order module on a specific page within the content, use this option.

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_.

Apply action codes

It's possible to apply action codes programmatically to an order after you created them in your Gifty Dashboard. This can be useful when you're running a special promotion where you want to apply the action code automatically, for example through a link in an email or on your website.

You can apply an action code in two ways:

  • Using a URL parameter on the order module page.
          
            
https://demo.com/gift-card?action_code=FALL10
  • Using a JavaScript function on your website, for example when clicking a button.
          
            
<a href="javascript:Gifty.applyActionCode('FALL10')">Apply action code FALL10</a>
  • By default on a specific page, automatically applying the action code when the page loads. Place this code below the general Gifty widget script.
          
            
<script>
// Wait for Gifty widget to become available
var giftyTimer = window.setInterval(function() {
    if (window.Gifty && window.Gifty.applyActionCode) {
        window.clearInterval(giftyTimer);
        window.Gifty.applyActionCode('FALL10');
    }
}, 800);
</script>
language