Clerk.js

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. Med kun 37,7kb er det en super letvægtsløsning.

Der er tre fordele ved at bruge Clerk.js:

• Det er robust, da det indlæses asynkront. Det betyder, at resten af siden ikke er afhængig af et API-svar før indlæsning.
• Det er ofte hurtigere, da din server kan begynde at rendere siden parallelt med, at Clerk.js foretager kald og fremviser resultater.
• Besøgs- og kliksporing håndteres automatisk for alle resultater vist af Clerk. Dette kræver ingen cookies, da vi genererer en hashet værdi af besøgendes IP og useragent kombineret med en unik store salt, som udskiftes hver 30. dag.

Clerk.js indlæses med et initialiseringsscript, der tilføjes til headeren på hjemmesiden:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Den indlæser biblioteket fra vores CDN og lader dig tilgå dens funktionalitet gennem Clerk objektet, samt konfigurerer Clerk.js med API-nøglen, så den allerede ved, hvilken Store den skal lave API-kald for.

Snippets #

Når siden er indlæst, scanner Clerk.js den for snippets med klassen “clerk”.

Derefter bruger den attributterne fra snippet’en til at bygge et API-kald, mens den henter API-nøglen fra konfigurationen i initialiseringsscriptet.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Den visuelle fremstilling håndteres af Designet, som også refereres af snippet’en.

Clerk.js bruger Liquid designs til at rendere HTML med data returneret af API’en. Disse er formateret som scripts, refereret ved deres ID i data-template i din snippet.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Søgeresultat for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Køb Nu</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Indlæs flere resultater</a>
</script>

Snippets kan også forsimples til blot at inkludere en reference til en Element blok ved at bruge syntaksen data-template="@element-block-id":

<span class="clerk"
     data-template="@product-page-alternatives"
     data-products="[12352]">
</span>

Designs håndteres derefter med Design Editor eller med Liquid HTML kode på en brugervenlig måde fra my.clerk.io.

Dine snippets skal kun indeholde klassen clerk, eventuel side-specifik information som produkt-ID’er, og en reference til ID’et for et Element blok i data-template.

Injection #

Injection er en funktion, der giver dig mulighed for at indsætte indholdssnippets på dit website uden at skulle gøre det manuelt. I stedet vælger du blot en CSS Selector at injicere snippet’en i, og Clerk.js tilføjer den automatisk ved sideindlæsning.

Læs mere om Injection her.

Konfiguration #

Clerk.js tillader en række konfigurationer, der ændrer, hvordan det fungerer.

Besøgs-ID’er #

Som standard genererer Clerk.js anonyme besøgs-ID’er, der bruges til at spore sessioner.

Hvis kunder accepterer cookies, kan Clerk.js konfigureres til at placere en vedholdende cookie med besøgs-ID, hvilket tillader sporing over en længere periode.

Hvis du foretrækker at håndtere session-ID’er manuelt, kan du konfigurere visitor parameteren, som Clerk bruger i API-kald. Alternativt kan du slukke for session tracking helt ved at sætte visitor til null.

// Persistent visitor ID
Clerk('config', {
  visitor: 'persistent'
});

// Custom visitor ID
Clerk('config', {
  visitor: 'ABC123'
});

// Disabling visitor tracking
Clerk('config', {
  visitor: null
});

Sidekontekst #

Konfigurerer Clerk.js med konteksten for den side, en besøgende aktuelt ser. Dette bruges til at berige sporingsdata til personaliseringsfunktioner som Email Triggers, Audience segmentering og Chat kontekst.

Clerk('context', {
  product: null,  // Indstil produkt-ID på produktsider, f.eks. 12345 eller null
  category: null, // Indstil kategori-ID på kategorisider, f.eks. 67 eller null
  page: null      // Indstil side-ID eller type på andre sider, f.eks. 'homepage' eller null
});

Sprog #

Konfigurerer Clerk.js med det skrevne sprog på hjemmesiden. Dette bruges for Clerk.io til korrekt at håndtere grammatikregler i Search, samt til at hente de korrekte oversættelser, når du bruger multi-language feeds.

Clerk('config', {
  language: 'italian'
});

Tilladte værdier er listet under Supported languages.

Erstat pladsholder-værdierne med din platforms logik for at hente ID’erne dynamisk. Hver værdi skal indstilles baseret på den type side, som den besøgende er på:

• product: ID’et på det produkt, der ses på produktsider. Sæt til null på ikke-produkt-sider.
• category: ID’et på den kategori, der ses på kategorisider. Sæt til null på ikke-kategori-sider.
• page: En sideidentifikator eller type-streng på andre sider som forside, kurv eller checkout. Sæt til null, hvis ikke relevant.

Hvis din platform ikke har et specifikt ID tilgængeligt for en sidetype, lad værdien være null. Indstil kun værdier for de sidetyper, der er relevante.

Designfunktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at skabe tilpasset javascript-funktionalitet til dine design scopes.

Formatters #

Disse bruges til at påvirke eller ændre attributter. For eksempel vil du måske kun vise de første 40 tegn af en beskrivelse, eller du skal beregne en specifik rabatprocent baseret på hvilken type kunde, der er logget ind.

Globals #

Disse er tænkt til at blive brugt med frontend-data, som du ønsker adgang til i designs. Eksempler kunne være det resterende beløb, der mangler for at opnå gratis fragt, navnet på en indlogget kunde, et valutasymbol eller en valutakurs.

Nedenfor er et eksempel på konfiguration af formatters og globals.

Config #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Design #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Output #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Email Tracking #

Clerk.js kan automatisk indsamle emails i kundens session så de kan bruges til at personalisere email anbefalinger, selvom kunden ikke har afgivet en ordre endnu.

Aktivér collect_email i din Clerk.js konfiguration:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Når dette er aktiveret, overvåger Clerk.js email-inputfelter og sender automatisk log/email, når en besøgende indtaster en emailadresse.

Hvis du ønsker at logge en email manuelt, kan du også tilføje et snippet som dette:

<span class="clerk" data-api="log/email" data-email="EMAIL@EXAMPLE.COM"></span>

Indloggede kunder #

Hvis din webshop har kundekonti, skal du kalde log/email, hver gang en kendt kundes emailadresse er tilgængelig i sessionen — både når de logger ind aktivt, og når de vender tilbage til siden allerede logget ind.

Den simpleste tilgang er at tjekke ved hver sideindlæsning, om en email er tilgængelig, og hvis ja, foretage kaldet. For at undgå unødvendige API-kald, gem et flag i browser-sessionen, så det kun sendes én gang per session:

<script type="text/javascript">
  if (!sessionStorage.getItem('clerk_email_logged')) {
    Clerk('call', 'log/email', {
      email: 'CUSTOMER_EMAIL'
    });
    sessionStorage.setItem('clerk_email_logged', '1');
  }
</script>

Erstat CUSTOMER_EMAIL med den faktiske emailadresse fra din platform. Render kun dette script, når en emailadresse faktisk er tilgængelig — spring det helt over for gæster.

Uden dette kan Clerk.io kun forbinde en besøgendes session til en emailadresse, når de gennemfører et køb. At logge det, når en email er tilgængelig, betyder, at forbindelsen sker med det samme, hvilket er nødvendigt for at udløse automatiske emails baseret på browsing-adfærd, vise personaliserede anbefalinger i emails og anvende Merchandising kampagner, der målretter specifikke Audience segmenter.

Sådan virker forbindelsen #

Når en email logges, sender Clerk både besøgs-ID og emailadresse til API’en, så de kan forbindes.

Dette tillader Clerk at identificere, hvad den besøgende har gjort i sin sessionshistorik (for eksempel sete produkter, klik og søgninger) og forbinde denne adfærd med emailadressen.

Med den forbindelse på plads kan de samme adfærdsdata bruges til email-formål (som udløste og personaliserede emails) og til onsite personalisering i anbefalinger for indloggede kunder.

DOM Observation #

Aktivér DOM-observation når din webshop tilføjer Clerk.io-indhold efter siden er indlæst. Clerk.js overvåger ændringer til sidens struktur, kaldet DOM’en, så den kan opfange indhold, mens det indlæses.

Du kan aktivere den samme funktionalitet gennem SPA Auto Detect Changes i my.clerk.io eller ved at tilføje observe_dom: true til din Clerk.js-konfiguration.

Side Cart Eksempel #

Forestil dig, at din webshop først opretter sidekurven, når en besøgende tilføjer et produkt. Kurven inkluderer et Clerk.io anbefalingssnippet, så denne snippet tilføjes til siden, når kurven åbnes.

Med den timer-baserede tilgang tjekker Clerk.js for ændringer én gang i sekundet. Anbefalingssnippet kan vente til næste tjek, før Clerk.js samler den op.

Med observe_dom aktiveret, udløser tilføjelsen af sidekurven et tjek. Clerk.js kan samle snippet’en op hurtigere og begynde at rende anbefalingerne, hvilket reducerer ventetiden efter kurven vises.

Andre Eksempler #

Den samme funktion hjælper i andre setups, hvor indhold vises uden en fuld sideindlæsning:

• Add-to-cart popup: Webshoppen opretter en popup med Clerk.io anbefalinger efter en besøgende tilføjer et produkt. Clerk.js opdager det tilføjede indhold, når popup’en oprettes.
• Lazy-loaded sektion: Webshoppen tilføjer et Clerk.io-blok længere nede på siden, når den besøgende scroller. Clerk.js samler det op, når det tilføjes.
• Single-page app: En React- eller Vue-app tilføjer Clerk.io-indhold, når den besøgende navigerer til en anden visning. Clerk.js opfanger det tilføjede indhold uden at vente på en fuld sideindlæsning.

DOM-observation gælder også for indholdsblokke, email tilmeldingsformularer og live search.

Aktiver Observation #

Vælg én af disse måder for at aktivere DOM-observation:

• Backend: I my.clerk.io, åbn din Store og gå til Settings > Features. Aktivér SPA Auto Detect Changes.
• Kode: Tilføj observe_dom: true til din eksisterende Clerk.js-konfiguration som vist nedenfor.

Begge muligheder aktiverer den samme funktion, så du behøver kun at bruge én af dem.

Clerk('config', {
  key: 'INSERT_PUBLIC_API_KEY',
  observe_dom: true
});

Behold din Store’s public API-nøgle og andre options, der allerede er i konfigurationen.

Du skal stadig tilføje det relevante Clerk.io snippet og konfigurere dets Element og Design. Aktivering af observation hjælper Clerk.js med at opdage indhold tilføjet senere; det tilføjer ikke anbefalingsplaceringer på din webshop.

For manuel rendering og tilpassede selectors, se Custom Rendering.

Ressourceforbrug #

Clerk.js grupperer hurtige bursts af sideændringer i én gennemgang og begrænser fulde gennemløb til én gang hvert 500. ms. Observatøren foretager intet arbejde, mens siden er inaktiv, og introducerer ingen ekstra API-kald eller netværkstrafik.

Indstillingen er opt-in. Stores, der ikke aktiverer det, bevarer deres nuværende adfærd.

Custom Rendering #

Dette bruges primært med Single Page Apps (SPA), Progressive Web Apps (PWA) og andre applikationer, der ikke bruger traditionelle sideindlæsninger.

Clerk.js viser enhver element med klassen clerk, men andre klasser kan bruges til at tilpasse renderingen som custom selectors.

Som standard kræver Clerk, at du kører Clerk("content", "SELECTOR") for at vise indhold hver gang det skal vises.

Tilføjelse af auto_init_custom_selectors: true til config’en, får Clerk.js automatisk til at initialisere ethvert custom selector element, efterhånden som DOM ændres, så længe de allerede er blevet rendt med Clerk("content", "SELECTOR") én gang.

Denne opførsel fortsætter indtil en fuld sideopdatering foretages.

Debugging #

Clerk.js har en indbygget debug mode, der logger diagnostisk information til browserens konsol. Den gemmer sin konfiguration i sessionStorage under nøglen __clerk_debug, så debug mode forbliver aktiv under side-navigationer i samme browsersession.

Som standard er debug mode aktiveret med level sat til warn og collect sat til true.

Aktiveringsmetoder #

Der er tre måder at aktivere debug mode på.

Console shorthand

Den simpleste måde er at kalde Clerk('debug') fra browserens konsol. Den accepterer flere argumentformater:

Clerk('debug');              // Aktivér med standardindstillinger
Clerk('debug', true);        // Aktivér
Clerk('debug', false);       // Deaktivér
Clerk('debug', 'on');        // Aktivér
Clerk('debug', 'off');       // Deaktivér
Clerk('debug', 'warn');      // Indstil log-niveau direkte
Clerk('debug', {             // Giv et helt config objekt
  enable: true,
  level: 'log',
  group: true
});

Config path

Debug mode kan også konfigureres via den normale config-kald:

Clerk('config', 'debug', {
  enable: true,
  level: 'log',
  collect: true,
  group: true,
  collapsed: false
});

URL hash

Debug mode kan aktiveres ved at tilføje et hash-fragment til URL’en. Dette er nyttigt til at dele debug-links med kolleger:

https://yourwebsite.com/#clerkjs:debug.enable=true&debug.level=warn

Når den aktiveres via URL-hash, gemmes konfigurationen også i sessionStorage under nøglen __clerk_tmp_config.

Config Options #

Session Storage #

Når debug mode aktiveres, gemmes konfigurationen i sessionStorage under nøglen __clerk_debug. Dette sikrer, at debug-indstillingerne forbliver, mens brugeren navigerer mellem sider, uden at påvirke andre browserfaner eller vare ud over sessionen.

Consent Management Platforms (CMP) som Cookiebot kan markere __clerk_debug som et storage-item, der kræver dokumentation. Det er en funktionel nøgle, kun brugt til udvikler-debug formål. Den indeholder ikke persondata eller sporingsoplysninger.

For detaljer om strukturen i API debug responses, se Response debugging.

UI Kit #

Clerk.js inkluderer et sæt UI-værktøjer til vigtige elementer, der kan bruges til at forbedre brugeroplevelsen. Disse sparer ofte udviklingstid for tilpassede opsætninger.

Instant Search #

En nøgledel af en god søgeoplevelse i e-handel er at få resultater med det samme, mens du skriver. Vores Instant Search UI-komponent gør denne oplevelse hurtig og nem at bygge.

Alt Clerk.io-indhold kan teoretisk gøres til en Instant Search-komponent, men det fungerer bedst som et dropdown, der viser søgeresultaterne.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Produkter matcher <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Læs mere om Instant Search UI-værktøjet her.

Search Page #

En vigtig del af en god søgeoplevelse i e-handel er at få gode søgeresultater. Vores Search Page gør denne brugeroplevelse hurtig og nem at bygge.

Search Page lader dig oprette en hel side, der viser de bedst mulige match for enhver given forespørgsel.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Produkter matcher <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Search Page UI-værktøjet her.

Category Page #

En veldisponeret kategoriside er nøglen til en succesfuld eCommerce forretning. Vores Category Page gør denne oplevelse hurtig og nem at bygge. Den lader dig oprette en hel side, der viser de bedst mulige resultater for en given kategori.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Category Page UI-værktøjet her.

Facets #

Clerk.js kommer med indbygget understøttelse af dynamisk facetteret navigation til både søgning og kategorier. Alle produktattributter, du sender til os, kan bruges som facetter.

Her er et eksempel på grundlæggende brug:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Vis mere"
  data-facets-searchbox-text="Søg efter "
  data-facets-design="133995">
</span>

Læs mere om Facets UI-værktøjet her.

Exit Intent #

Exit intent popuppen reagerer, når en besøgende forsøger at forlade dit website ved at føre musen nær toppen af browseren. Den popper op og viser interessante produkter, som måske kan omvende en besøgende til en betalende kunde.

Ethvert Element-blok kan udløses ved exit intent ved at tilføje attributten data-exit-intent="true" til snippet’en.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Læs mere om Exit Intent UI-værktøjet her.

Popup #

UI Kit indeholder et simpelt popup-bibliotek, så du nemt kan lave simple og brugervenlige popups med ethvert indhold. Ethvert HTML-element på dit website med klassen clerk-popup vises som en popup.

<div id="my-popup" class="clerk-popup">Hej, verden!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // vis popup
  my_popup.show(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // skjul popup
  my_popup.hide(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Læs mere om Popup UI-værktøjet her.

Chat #

Clerk.js eksponerer et JavaScript-interface til at styre Chat widgetten og reagere på samtale-events. Dette er nyttigt, når du vil udløse chat fra dit eget UI, sende AI’en kontekstuelle data om, hvad den besøgende foretager sig, eller hooke ind i samtale-events fra resten af din frontend.

Den fulde metode- og event-reference findes i Chat JS docs.

Åbning af Chat via en Brugerdefineret Knap #

Hvis du ønsker at udløse Chat fra din egen knap eller UI-element i stedet for den standard launcher, brug toggle:

<button onclick="Clerk('chat', 'toggle')">
  Brug for hjælp?
</button>

Du kan også bruge open og close individuelt for at styre tilstanden eksplicit.

Visning af Chat kun på Specifikke Sider #

Som standard er Chat synlig på hele sitet. For kun at vise det på specifikke sider, deaktivér det i din globale config og aktiver det selektivt:

// I din globale Clerk.js config — skjul Chat overalt
Clerk('config', { key: 'your-public-api-key' });
Clerk('chat', 'disable');

// Så på de sider, hvor du ønsker den synlig
Clerk('chat', 'enable');

Videregivelse af Kurv og Sidekontekst til AI’en #

Metoden metadata sender struktureret kontekst til Chat, så AI’en kan give mere relevante svar. Kald den hver gang den besøgendes kontekst ændrer sig — side-navigation, tilføjelse til kurv, opdatering af præferencer.

// På en produktside
Clerk('chat', 'metadata', {
  current_page: {
    page_type: 'product',
    page_id: '12345'
  }
});

// Efter en besøgende tilføjer et produkt til kurven
Clerk('chat', 'metadata', {
  cart: {
    items: [
      { id: 101, name: 'Lightsaber', price: 99.95 },
      { id: 204, name: 'Force Gloves', price: 29.95 }
    ],
    total: 129.90
  }
});

Payload-strukturen er fleksibel — inkluder den kontekst, der er bedst tilpasset de samtaler, der foregår på siden.

Justering af AI-adfærd Baseret på Hvad Besøgende Gør #

Metoden prompt_message sender en systeminstruks til AI’en. Kunden ser det aldrig, men det ændrer, hvordan AI’en svarer i den aktuelle samtale.

// Efter tilføjelse til kurven — bed AI om at foreslå tilbehør
Clerk('chat', 'prompt_message', 'Brugeren har lige tilføjet en Lightsaber til sin kurv. Foreslå komplementære produkter som tilbehør eller beskyttelsesudstyr.');

// På checkout-siden — fokusér på gennemføre ordre
Clerk('chat', 'prompt_message', 'Brugeren er på checkout-siden. Hjælp dem med at gennemføre deres ordre og besvar eventuelle sidste spørgsmål.');

Overdragelse til Menneskelig Agent #

Når en besøgende har brug for menneskelig support, affyrer onSupport eventet med en opsummering af samtalen. Brug dette til at åbne din helpdesk chat og sende konteksten, så agenten straks er opdateret — ingen grund til at den besøgende gentager sig selv.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onSupport: (e) => {
      // e.summary indeholder en plain-text sammenfatning af samtalen hidtil
      const summary = e.summary || 'Ingen samtaleopsummering tilgængelig.';

      // Eksempel: åbn Intercom og udfyld kontekst
      if (window.Intercom) {
        Intercom('showNewMessage', 'Fortsætter fra AI Chat:\n\n' + summary);
      }

      // Eksempel: åbn Zendesk med udfyldt kontekst
      if (window.zE) {
        zE('messenger', 'open');
        zE('messenger:set', 'conversationFields', [
          { id: 'clerk_chat_summary', value: summary }
        ]);
      }

      // Valgfrit: skjul Clerk Chat, når overdragelsen er gennemført
      Clerk('chat', 'disable');
    }
  }
});

onSupport eventet affyres kun, når Contact Support er konfigureret i Chat-indstillinger og den besøgende eksplicit beder om en menneskelig agent.

Reager på Chat events #

Brug event hooks til at integrere Chat-adfærd med resten af din frontend — for eksempel logging af beskeder, synkronisering af state, eller overdragelse til et menneske.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onMessage: (e) => {
      // Affyres for hver besked — role er 'user', 'ai' eller 'results'
      console.log(e.message.role, e.message.text);
    },
    onOpen: (e) => {
      // Affyres når Chat-vinduet åbnes eller lukkes
      analytics.track('Chat toggled', { open: e.open });
    },
    onSupport: (e) => {
      // Affyres når den besøgende beder om en menneskelig agent
      // e indeholder samtaleopsummering
      openLiveChatWithSummary(e);
    }
  }
});

Du kan også registrere event hooks dynamisk efter initiel config:

Clerk('chat', 'on', 'message', function(e) {
  console.log('Ny besked:', e.message.text);
});

Læs mere i Chat JS docs.

Ekskludering af produkter #

Clerk.js har to måder at ekskludere produkter på, afhængig af om du vil udelukke specifikke ID’er eller undgå at vise dubletter mellem forskellige sliders.

Ekskludering af specifikke ID’er #

Tilføj blot attributten data-exclude til snippet’en. Indholdet af data-exclude skal være en liste over produkt-ID’er, du ikke vil have vist, fx produkter i kundens kurv eller produkter de ikke må se.

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654, 3244, 12352]">
</span>

Undgå Dubletter #

Dette gøres ved at tilføje attributten data-exclude-from på Clerk-blokken der, hvor du vil fjerne dubletterne. Værdien for attributten skal være en CSS-selector for anden(e) snippet(s), du vil forhindre dubletter fra.

I eksemplet nedenfor vil .clerk-2 ekskludere ethvert produkt, der er i .clerk-1, og .clerk-3 ekskluderer alle produkter, der er i enten .clerk-1 eller .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Events #

Når du bygger mere tilpassede setups, vil du ofte have brug for at reagere på eller ændre resultaterne fra Clerk, før de vises. Det er her Events er nyttige.

Events lader dig opsætte event-lyttere, der kører kode på bestemte tidspunkter før, under eller efter Clerk.js viser sine resultater.

Et typisk eksempel er at hente specialpriser for en indlogget kunde i et B2B-setup. Et event kan køre straks efter Clerk’s API har rendret, så du kan hente specialprisen for kunden og tilføje dem til produktelementerne:

var customer_id = INSERT_CUSTOMER_ID;
Clerk("on", "rendered", function(content, data){
  for (i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
        var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
        let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
        price_container.innerText = custom_price;
    }
})

Læs mere om Events her.

SEO og Performance #

Clerk.js driver personaliserede shoppingoplevelser uden at gøre dit site langsommere eller skade SEO. Ved at bruge client-side rendering og optimeret indlæsning balanceres hastighed, ydeevne og synlighed i søgemaskiner.

SEO og hastighed #

Det er en misforståelse, at JavaScript-funktioner som Clerk.js skader ydeevne eller SEO. Automatiserede værktøjer overser ofte optimeringer såsom caching, parallel indlæsning og server-side håndtering.

Fordele ved Clerk.js integration #

• Clerk.js-scriptet (≈ 37 - 38 KB) indlæses asynkront, hvilket gør det muligt for dit site at blive gengivet, mens Clerk initialiseres.
• Clerk-elementer gengives på klientsiden, hvilket betyder, at din base HTML forbliver cachebar, og dynamiske komponenter kun injiceres efter indlæsning.
• Dette muliggør effektiv server-side caching og ikke-blokerende indlæsning af Clerk.js-assets.

Ydeevnepåvirkning #

• Clerk.js’ lette og asynkrone karakter resulterer typisk i minimal indflydelse på sideindlæsningstiden.
• Reelle ydeevnetab skyldes ofte ekstra billeder, der vises i recommendations, ikke selve scriptet. For at minimere påvirkningen:
  • Brug passende størrelser og effektive filformater som WebP.
  • Tilpas billedstørrelsen, så den matcher visningsdimensionerne (f.eks. 400×400 px → 420×420 px maks).
• For at undgå layout-skift (CLS), reserver plads til indsprøjtet Clerk-indhold.

F.eks.:

.clerk-slider-wrapper {
  min-height: 300px; /* juster efter behov */
  width: 100%;
}

SEO-overvejelser #

Forståelse af, hvordan Clerk.js interagerer med søgemaskiner, hjælper med at sikre, at din implementering understøtter både brugeroplevelse og synlighed i søgninger.

Linking og crawlbarhed #

• Clerk.js injicerer recommendation-links dynamisk på klientsiden.
• Disse links kan forbedre intern linking ved at forbinde relaterede sider, hvis søgemaskinerne gengiver og følger dem korrekt.
• Da de injiceres via JavaScript, bør du verificere, hvordan søgemaskine-robotter gengiver og fortolker dem.
• Korrekt crawlede links kan forbedre crawlbarhed og give søgemaskiner mulighed for at opdage og indeksere flere sider.

PageRank-fordeling #

• Når søgemaskiner kan crawle dem, kan Clerk.js-links hjælpe med at fordele link equity (PageRank) på tværs af vigtige sider.
• Dette understøtter forbedret synlighed og placering af produkt- og kategorisider.

Observerede fordele #

• Korrekt Clerk.js-integration kan korrelere med stærkere interne linkingstrukturer, hvilket kan støtte forbedret synlighed i søgeresultater.
• Clerk.io dashboards giver analyser af ordreindflydelse, konverteringsløft og omsætningsbidrag fra Search, Recommendations, Email og Audience-funktioner.

Anbefalede best practices #

1. Optimer billeder (WebP-format, korrekt opløsning).
2. Reserver layoutplads til dynamiske elementer for at undgå layout-skift.
3. Overvåg reelle metrics i stedet for kun at stole på automatiserede scores. Brug Clerk’s dashboards til at evaluere effekten på tværs af kanaler.