Direct vanuit je keuzehulp naar de winkelwagen? Dat kan met behulp van de Add to cart call to action. In plaats van de standaard call to action (CTA) die linkt naar de product detail pagina kan je een CTA tonen om de klant de mogelijkheid te geven het product aan hun winkelwagen toe te voegen.
Let op: je hebt een developer met kennis van JavaScript nodig om deze functionaliteit te implementeren.
We raden je aan om eerst een kopie te maken van je keuzehulp om mee te testen. Zodra de integratie werkt kun je het aanzetten in al je live keuzehulpen.
Onderneem de volgende stappen om de CTA als Add to cart te gebruiken.
Stap 1: Activeer de CTA in Aiden
Ga naar de keuzehulp en dan naar Conversation > Advice page > Product content. Verander het type van “Product link” naar “Add to cart”. Verander de tekst van de Add to cart knop.
Stap 2: Implementeer de action op je website
Om de CTA werkend te maken stuurt Aiden een event naar de website zodra er op de knop geklikt wordt. Dit event moet op de website afgevangen worden en vervolgens moet er een actie aan gekoppeld worden die de knop functioneel maakt.
Vervolgens moet er een terugkoppeling gestuurd worden naar de Aiden applicatie (zie stap 2.2) om de klant feedback te geven of de actie gelukt is.
Let op: wanneer er na 10 seconden geen terugkoppeling binnen is gekomen bij de keuzehulp zal deze ervan uitgaan dat de actie niet is uitgevoerd en passende feedback tonen. Als je meer tijd nodig hebt, bijvoorbeeld omdat er nog een handeling nodig is van de klant, kan je het event "acknowledgen" om de timeout op te schorten.
2.1 Actions uitvoeren
De Add to cart actie die wordt afgevuurd kan worden afgevangen met een event listener. Deze moet luisteren naar een event target met de naam aiden-actions. Vervolgens kan je het soort actie herkennen aan de event.detail.actionId welke aiden-add-to-cart is.
Om de events te kunnen ontvangen moet je een event listener op de window toevoegen, die luistert naar "aiden-actions".
window.addEventListener("aiden-actions", function (event) {
// Check which action was performed, in this case "aiden-add-to-cart".
if (event.detail.actionId === "aiden-add-to-cart") {
// Acknowledge the Aiden app that you received the event,
// you have an implementation for this specific action,
// and you will handle it.
event.detail.acknowledgeCallback();
// Perform the Add to cart action
// In most cases this means calling an endpoint or triggering some functionality like a modal.
//
// <Add your implementation here>
//
// If the operation succeeds signal the Aiden app with a success:
// event.detail.successCallback();
// If the operation failed signal the Aiden app the operation failed:
// event.detail.failedCallback();
// If the operation is aborted, either by your decision or a customer decided to abort the action. This is useful in cases where a customer has to make additional choices before adding the product to their cart but closes the popup modal or another way to cancel the action.
// event.detail.abortCallback();
}});
Het event bevat een detail veld met daarin specifieke data voor het event. Dit is de structuur en data van het detail veld.
type detail = {
type: "custom-action"
advisorId: string
advisorName: string
actionId: string
products: {
id: string
quantity: number
name: string
}[]
}Naam | Bevat |
detail.advisorId | Unieke waarde om de Aiden keuzehulp te identificeren |
detail.advisorName | De naam van de keuzehulp die je hebt ingesteld in Aiden |
detail.actionId | De identifier van de actie, voor Add to cart is deze |
detail.products | Een lijst met producten |
detail.products[].id | Het product ID zoals dat in de catalogus in Aiden staat |
detail.products[].name | De productnaam |
detail.products[].quantity | De hoeveelheid van het product. Dit is altijd een getal van 1 of hoger. |
2.2 Terugkoppeling naar de keuzehulp
Wanneer de website actie uitgevoerd is dient er een reactie teruggestuurd te worden naar de keuzehulp. Er zijn vier mogelijke reacties:
event.detail.acknowledgeCallback()
Roep deze aan als je het event hebt ontvangen en er een implementatie voor hebt. De applicatie zal blijven wachten op verdere responses. Wordt dit niet gedaan dan wordt er na 10 seconden de actie afgebroken en feedback gegeven aan de klant dat de actie niet is gelukt.event.detail.successCallback()
Gebruik deze reactie als de actie op de website succesvol is afgerond, bijvoorbeeld wanneer het product is toegevoegd aan de winkelwagen.event.detail.failedCallback()Gebruik deze reactie als de actie op de website is mislukt, bijvoorbeeld wanneer niet gelukt is om het product aan de winkelwagen toe te voegen.
event.detail.abortCallback()
Gebruik deze reactie als je de actie wilt afbreken. De Aiden applicatie zal direct terugspringen naar de status voordat de actie werd uitgevoerd. Deze callback is voor situaties waar je de actie voor een of andere reden niet kunt afhandelen, of dat de klant de actie afbreekt, bijvoorbeeld bij een keuze modal om een variant van het product te kiezen voordat je het toevoegt aan de winkelwagen.
2.3 Keuzehulp tijdelijk verbergen
Indien je na een click op de CTA bijvoorbeeld een formulier of een pop-up met wilt tonen kan je de keuzehulp tijdelijk verbergen of ervoor zorgen dat de nieuwe content boven de keuzehulp komt te liggen. Hiermee voorkom je ook een pop-up-over-pop-up situatie welke bijdraagt aan een duidelijke klantervaring.
Hiervoor zijn de volgende functies beschikbaar:
event.detail.hideApp()
Gebruik deze functie om de keuzehulp tijdelijk te verbergen.event.detail.showApp()
Gebruik deze functie om de keuzehulp weer zichtbaar te maken.event.detail.setZIndex(100)
Gebruik deze functie om de z-index van de keuzehulp in te stellen, geef als eerste argument de gewenste z-index op. Hiermee kan je ervoor zorgen dat de keuzehulp onder modals komt te liggen die nodig zijn voor het uitvoeren van de actie.
Stap 3: Publiceer je keuzehulp
Vergeet niet je keuzehulp opnieuw te publiceren, pas daarna wordt de CTA zichtbaar en functioneel op de adviespagina. Indien de keuzehulp al live staat, maak dan een kopie van de keuzehulp om de CTA eerst te kunnen testen zodat deze direct werkt wanneer de keuzehulp opnieuw gepubliceerd wordt.