Alles wat bluebarry in je webshop toont (quizzen, zoekfunctie, productchat en pop-ups), draait op één klein script. Dat script geeft je developer ook een JavaScript-hulpmiddel op de pagina, window.barry, om vanuit eigen code een quiz te openen, bluebarry te vertellen wie een bezoeker is of een bestelling te meten. De meeste webshops hebben het nooit nodig. Dit artikel is voor het moment dat jij het wel nodig hebt.
Het script laden
Op Shopify, WooCommerce en CCV Shop laadt de app, plug-in of koppeling het script al. Overal anders kopieer je het Funnel script van de Launch-tab van een quiz en zet je het in de <head> van elke pagina. Kort gezegd doet het dit:
<script>
window.barry = window.barry || {};
window.barry.tenantId = "YOUR_TENANT_ID";
</script>
<script async src="https://api.bluebarry.ai/sdk/YOUR_TENANT_ID/advisor.js"></script>- Het script laadt op de achtergrond en haalt alleen de onderdelen op die je webshop gebruikt. Zie Gemaakt voor een snelle webshop.
- Per ongeluk twee keer geïnstalleerd? Geen probleem: de eerste kopie wint.
- Roep de methodes hieronder aan vanuit een klikhandler of nadat de pagina geladen is, zodat het script er is als je code draait.
Een quiz openen
Voor een quizknop heb je geen code nodig: een link naar #bluebarry:QUIZ_ID opent de quiz. Gebruik voor je eigen knoppen en events openAdvisor. De quiz-ID staat in de quizlink op de Implementation-tab.
barry.openAdvisor("QUIZ_ID");
// Product check: vraag naar één product
barry.openAdvisor("QUIZ_ID", "PRODUCT_ID");
// Opnieuw beginnen in plaats van eerdere antwoorden te hervatten
barry.openAdvisor("QUIZ_ID", undefined, { restart: true });Met een paar hooks kan je pagina reageren op de quiz:
barry.onOpened = (quiz) => { /* de quiz-overlay is geopend */ };
barry.onResultOpened = (result) => { /* de klant heeft de resultaten bereikt */ };
barry.onClosed = () => { /* de quiz-overlay is gesloten */ };
// De quiz niet opnieuw openen als een klant terugkomt via de terugknop
barry.autoOpenOnBackNavigation = false;Wil je op een productpagina laten zien hoe goed het product past bij de antwoorden van de klant? Gebruik dan barry.getProductMatch(url). Zie De Product Match API gebruiken.
bluebarry vertellen wie een bezoeker is
Logt een klant in of schrijft die zich in voor je nieuwsbrief? Geef dan het e-mailadres door. bluebarry koppelt het aan de bezoeker, zodat surfgedrag, zoekopdrachten en quizantwoorden samenkomen in één klantprofiel. Doe dit alleen bij klanten die daar toestemming voor hebben gegeven.
barry.identify({ email: "[email protected]" });Meer hierover in De Identify API gebruiken.
Een bestelling meten
Shopify en WooCommerce sturen bestellingen voor je naar bluebarry. Op andere platforms roep je trackConversion aan op je orderbevestigingspagina, met de echte ordergegevens:
barry.trackConversion({
conversionId: "ORDER-12345",
currencyIso: "EUR",
orderProductTotal: 250.00,
orderTaxTotal: 62.50,
orderGrandTotal: 312.50,
items: [
{ itemId: "SKU-001", quantity: 2, priceExclTax: 100.00, priceInclTax: 125.00, taxPercentage: 25 },
],
});bluebarry koppelt de bestelling aan de quiz die de klant heeft gedaan, ook als dat dagen geleden was. Staat het hoofdscript niet op je bevestigingspagina? Gebruik dan het kant-en-klare script uit Het performancescript implementeren.
De zoekfunctie openen
Staat de zoekfunctie live, dan koppelt die zich vanzelf aan de zoekbalk van je webshop. Gebruik deze als je een eigen zoekknop hebt, of als je de volledige zoekresultatenpagina op een eigen pagina wilt:
barry.openSearch();
barry.closeSearch();<!-- Op je zoekresultatenpagina -->
<div data-bluebarry-serp></div>Zie De zoekfunctie live zetten in je webshop voor de installatiesnippet.
Productchat
Open of sluit de chat met je eigen knop, of geef hem een vaste plek op de pagina:
barry.openChat();
barry.closeChat();
// Is de chat beschikbaar op deze pagina? "ready", "disabled", "error" of "missing_target"
barry.chatStatus?.state;<!-- Waar de ingesloten chat moet verschijnen, bijvoorbeeld boven het productoverzicht -->
<div data-bluebarry-product-chat-embed></div>Wisselt je webshop van pagina zonder te herladen? Vertel de chat dan met barry.updateChat(...) waar de klant nu is. Zie Productchat installeren in je webshop.
Pop-ups
Pop-ups met een trigger openen vanzelf, zonder code. Wil je er een openen met je eigen knop of link? Gebruik dan de ID uit de pop-upeditor:
barry.openPopup("POPUP_ID");
barry.closePopup();
// In webshops die niet herladen tussen pagina's: geef door waar de klant naar kijkt
barry.setPopupContext({ productId: "PRODUCT_ID", cartState: "nonempty" });Meer hierover in Een pop-up maken.
In winkelwagen
De quiz, de zoekfunctie en de chat voegen allemaal producten toe aan de winkelwagen via hetzelfde hulpmiddel. Jij kunt het ook gebruiken, op Shopify, WooCommerce en CCV Shop:
const result = await barry.cart.add([{ reference: "VARIANT_ID", quantity: 1 }]);
// { success: true, skipped: [] }, of bij een fout: "soldOut" | "error"
barry.cart.reveal(); // open de winkelwagenlade, of ga naar de winkelwagenpaginaDe reference is wat de winkelwagen van je webshop verwacht: op Shopify de variant-ID, op CCV Shop de product-ID.
Luisteren naar events
bluebarry meldt een paar momenten op de pagina, zodat je eigen scripts (of je analysetools) erop kunnen reageren:
document.addEventListener("barry:cart:added", (e) => {
console.log("Added to cart", e.detail.items);
});
document.addEventListener("barry:chat:status", (e) => { /* e.detail.state */ });
document.addEventListener("barry:chat:product-click", (e) => { /* e.detail is het product */ });barry:cart:added gaat af bij elke toevoeging vanuit elke bluebarry-functie. Eén listener dekt ze dus allemaal.
Hoe bluebarry een bezoeker herkent
Het script zet één first-party cookie, bb_uid, op je eigen domein. Die bevat een willekeurige bezoekers-ID en blijft twee jaar bewaard. Omdat hij op je hoofddomein staat, delen alle functies en subdomeinen hem: een quiz op quiz.yourstore.com en de zoekfunctie op yourstore.com zien dezelfde bezoeker. Zo komen quizantwoorden, zoekopdrachten, inschrijvingen via pop-ups, chats en bestellingen samen in één profiel.
- Na een quiz onthouden twee extra cookies (
bb_sessionenbb_advisor) die quiz 30 dagen lang, zodat een latere bestelling er nog aan toegeschreven kan worden. barry.getUid()geeft de bezoekers-ID terug, als je die in je eigen systemen wilt koppelen.- Zonder cookies werkt alles nog steeds voor de klant: quizzen, zoekfunctie, chat en pop-ups doen wat ze altijd doen. Wat je kwijtraakt, is de verbinding tussen bezoeken. Elke paginaweergave telt als een nieuwe bezoeker, dus antwoorden en zoekopdrachten bouwen geen profiel op en bestellingen kun je niet terugleiden naar een quiz.