Bestelmodule Integraties REST API
language
Inloggen
menu

JavaScript.

Plaats de bestelmodule met enkele regels code op iedere website. Je kunt de bestelmodule op verschillende manieren plaatsen.

Openen via het menu

Je verkoopt de meeste cadeaubonnen door “Cadeaubon” toe te voegen aan het hoofdmenu van je website zodat deze altijd zichtbaar is.
Aanbevolen

Openen via een link

Wil je een pagina met informatie over je cadeaubon maken, en daarop een knop plaatsen die de bestelmodule opent? Gebruik dan deze optie.

Openen via het cadeau-icoon

Gebruik deze optie wanneer je de bestelmodule als cadeau-icoon op je hele website wilt plaatsen. Je plaatst het icoon links of rechts in beeld.

Ingesloten op een pagina

Wanneer je de bestelmodule als module op een specifieke pagina wilt plaatsen, gebruik dan deze optie.

Je verkoopt de meeste cadeaubonnen door “Cadeaubon” toe te voegen aan het hoofdmenu van je website zodat deze altijd zichtbaar is. Met onderstaande code opent de bestelmodule “over” je website heen.

  • Zet onderstaande code onderaan tussen de <body> en </body> tag in de HTML-code van je 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>
  • Stel onderstaande code in als link om de bestelmodule over de pagina heen te openen.
          
            
<a href="javascript:Gifty.open();">Cadeaubon</a>
Aanbevolen

Openen via een link

Wil je zelf een pagina met informatie over je cadeaubon maken en daarop een knop plaatsen die de bestelmodule opent? Gebruik dan deze optie. Je bepaalt zelf hoe je de bestelmodule opent, en kunt een eigen pagina maken die goed gevonden wordt in zoekmachines. Vergeet niet om de pagina goed zichtbaar in het menu van je website te zetten.

  • Zet onderstaande code onderaan tussen de <body> en </body> tag in de HTML-code van je 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 de bestelmodule door Gifty.open(); aan te roepen. Dat kan achter een button, of in jouw eigen script.
          
            
<a href="javascript:Gifty.open();">Cadeaubon kopen</a>

Openen via het cadeau-icoon

Gebruik deze optie wanneer je de bestelmodule als cadeau-icoon op je hele website wilt plaatsen. Op iedere pagina komt een cadeau-icoon in beeld, de bestelmodule opent door op het icoon te klikken.

  • Zet onderstaande code onderaan tussen de <body> en </body> tag in de HTML-code van je 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>

Ingesloten op een pagina

Wanneer je de bestelmodule als module op een specifieke pagina wilt plaatsen, gebruik dan deze optie. Zorg wel dat “Cadeaubon” zichtbaar is in het menu van je website om naar deze pagina te navigeren.

  • Zet onderstaande code onderaan tussen de <body> en </body> tag in de HTML-code van je 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>
  • Plaats onderstaande code op de plek waar je de bestelmodule wilt tonen.
          
            
<div data-gifty></div>

Taal instellen

De taal van de bestelmodule wordt ingesteld op basis van de ingestelde taal in de browser van de gebruiker. We raden aan om deze logica te behouden zodat de gebruiker de bestelmodule in de taal ziet die diegene verwacht.

Soms wil je de taal zelf in kunnen stellen. Bijvoorbeeld als jouw website maar in een enkele taal beschikbaar is of als je zelf al een instelling voor de taal op je website hebt.

  • Voeg de language key aan de insluit-code toe. Geldige waardes zijn 'en', 'nl', 'de' en '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>

Producten toevoegen

Het is mogelijk om producten aan de bestelling toe te voegen vanaf de eigen website. Je kunt een cadeaubon in de winkelwagen plaatsen met een vrij bedrag of een vooraf ingesteld arrangement.

Nadat je een product toevoegt wordt de bestelmodule geopend (indien dit nog niet het geval is) en wordt de bestelpagina in de bestelmodule getoond.

  • Een cadeaubon t.w.v. € 25,00 toevoegen via een link
          
            
<a href="javascript:Gifty.addToCart({
    type: 'gift-card',
    value: 2500,
    quantity: 1
})">Cadeaubon € 25,- toevoegen</a>
  • Een cadeaubon t.w.v. een arrangement toevoegen via een link
          
            
<a href="javascript:Gifty.addToCart({
    type: 'gift-card-package',
    value:'gp_PACKAGE_ID_HERE',
    quantity: 1
})">Dinner-arrangement toevoegen</a>
Als je een arrangement wilt toevoegen heb je het ID van het arrangement nodig. Je kunt deze achterhalen via de API of via het Gifty dashboard door een arrangement te bewerken. Je vindt het ID dan in de URL van de pagina. Het ID begint altijd met gp_.

Actiecodes toepassen

Het is mogelijk om actiecodes automatisch toe te passen op een bestelling. Dit kan handig zijn wanneer je een speciale actie voert waarbij je de actiecode automatisch wilt toepassen, bijvoorbeeld via een link in een e-mail of op je website

Je kunt een actiecode op drie manieren toepassen:

  • Door de actiecode aan een URL toe te voegen op pagina waarop de bestelmodule geïnstalleerd is
          
            
https://demo.nl/cadeaubon?action_code=HERFST10
  • Via een JavaScript functie op je website, bijvoorbeeld door op een knop te klikken
          
            
<a href="javascript:Gifty.applyActionCode('HERFST10')">Actiecode HERFST10 toepassen</a>
  • Standaard op een bepaalde pagina, door de actiecode automatisch toe te voegen zodra de pagina geopend wordt. Plaats deze code onder het algemene 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('HERFST10');
    }
}, 800);
</script>
language