Klaviyo Customer Hub JavaScript API-referens

Du kommer att lära dig

Så styr du Klaviyo Customer Hub – eller fristående Klaviyo Webbchatt – från din egen butiksfrontskod med hjälp av JavaScript-API:t window.customerHubApi. Du öppnar och stänger upplevelsen, navigerar till en specifik skärm, skickar ett chattmeddelande för kundens räkning och lyssnar på händelser som lägg till i kundvagn.

Innan du börjar

Du behöver:

• Klaviyo Customer Hub är installerat och inläst på din webbplatsbutik. Om du använder en headless- eller anpassad webbplatsbutik följer du först Så konfigurerar du Klaviyo Customer Hub med Headless Shopify – där beskrivs hur du lägger till onsite loader som gör detta API tillgängligt.
• Möjlighet att redigera och driftsätta din skyltfönsterkod.

Vad Klaviyo Customer Hub API är

Varje gång Klaviyo Customer Hub – eller fristående Klaviyo Webbchatt – läses in på din webbplats kopplar Klaviyo ett litet JavaScript-API till det globala window -objektet som window.customerHubApi. Du kan använda det för att öppna, stänga och interagera med upplevelsen från din egen kod – till exempel från en anpassad knapp, banner eller produktsida.

if (window.customerHubApi) {
  window.customerHubApi.open();
}

Metoder

open(route?)

Öppnar Klaviyo Customer Hub-lådan.

• route (sträng, valfritt) – en sökväg att navigera till när den öppnas. Om det utelämnas öppnas Hubben på den skärm som senast visades.

// Open the Hub on its default screen
window.customerHubApi.open();

// Open the Hub directly to a specific screen
window.customerHubApi.open('/orders');

Tillgängliga rutter

close()

Stänger Klaviyo Customer Hub-lådan. Hubben stannar på sin nuvarande skärm, så om du öppnar den igen med open() (ingen rutt) hamnar kunden där de slutade.

window.customerHubApi.close();

sendChatMessage(message)

Öppnar Klaviyo Customer Hub på chattskärmen och skickar ett meddelande för kundens räkning – användbart för knapparna ”Chatta om denna produkt” eller ”Få hjälp”.

• message (sträng) – meddelandet som ska skickas.

window.customerHubApi.sendChatMessage('I have a question about my order.');

När inloggning krävs: Om din butik kräver att kunder loggar in innan de chattar (och Klaviyo AI Agent inte är aktiverad) kommer kunden till chattskärmen för att logga in först. Meddelandet sparas tillfälligt och skickas automatiskt när inloggningen är klar. Det sparade meddelandet upphör att gälla efter cirka 10 minuter om inloggningen inte är slutförd.

sendConversationContext(context)

Köar bakgrundskontext som samlas in utanför chattkonversationen – till exempel svar från en förchattundersökning – för att skicka med kundens nästa chattmeddelande. Klaviyo sparar och refererar sedan till den här kontexten under resten av den konversationen.

• context (object) — ett objekt för enkätsvar som innehåller en entries -matris. Varje post måste innehålla en question och en answer.

window.customerHubApi.sendConversationContext({
  type: 'survey-response',
  entries: [
    { question: 'What color are you interested in?', answer: 'Red' },
  ],
});

getActiveConversationId()

Returnerar conversationId för den aktiva konversationen som pågår i lådan. Returnerar null om ingen konversation pågår.

window.customerHubApi.getActiveConversationId();

Lyssna efter evenemang

window.customerHubApi.events låter dig prenumerera på händelser som sker i Klaviyo Customer Hub.

addtocart

Utlöses när en kund lägger till en produkt i sin kundvagn från hubben. Använd den för att hålla din kundvagn i synk.

window.customerHubApi.events.addEventListener('addtocart', (event) => {
  // event.detail.items is an array of { variantId, quantity }
  event.detail.items.forEach((item) => {
    console.log('Added to cart:', item.variantId, 'x', item.quantity);
  });
});

Fullständigt exempel

En ”Chatta om den här produkten”-knapp som öppnar hubben och skickar ett meddelande, plus en lyssnare som synkroniserar skyltfönstervagnen när en kund lägger till en vara från hubben:

<button id="ask-about-product">Ask us about this product</button>

<script>
  document
    .getElementById('ask-about-product')
    .addEventListener('click', () => {
      if (window.customerHubApi) {
        window.customerHubApi.sendChatMessage(
          'I have a question about this product.'
        );
      }
    });

  // Sync the storefront cart when a customer adds an item from the Hub
  if (window.customerHubApi) {
    window.customerHubApi.events.addEventListener('addtocart', (event) => {
      refreshStorefrontCart(event.detail.items);
    });
  }
</script>

Ytterligare resurser