Skip to content

Client-Side Integration

The Presentation Layer is responsible for rendering the content and powering your Business Intelligence metrics.

Atheon provides a framework-agnostic Web Component, <atheon-container>, which seamlessly handles:

  1. User Journey Funnels: Tracks how users navigate through different conversational intents.
  2. Drop-off Analysis: Accurately logs when users abandon the interaction.
  3. Shadow DOM Isolation: Ensures the tracker doesn't conflict with your UI styles.

1. Load the Script

Add the Atheon loader to the <head> of your application (or your root layout file). Copy your publisher key directly from the Atheon Gateway Dashboard.

<script
  data-atheon-publisher-key="YOUR_PUBLISHER_KEY"
  src="https://js.atheon.ad/atheon.js"
  defer
></script>

2. Render the Container

Wrap your text renderer (Markdown, HTML, or plain text) with the <atheon-container> tag.

Pass the interaction_id returned by your backend as the interaction-id attribute. This ties the frontend engagement data to the backend LLM event.

import React from 'react';
import Markdown from 'react-markdown';

interface Props {
  llmResponse: string;
  interactionId: string;
}

export const ChatMessage = ({ llmResponse, interactionId }: Props) => {
  return (
    <atheon-container interaction-id={interactionId}>
      <Markdown>{llmResponse}</Markdown>
    </atheon-container>
  );
};

<template>
  <atheon-container :interaction-id="interactionId">
    <div v-html="llmResponse"></div>
  </atheon-container>
</template>

<script setup>
defineProps(['llmResponse', 'interactionId']);
</script>

<script>
  export let llmResponse;
  export let interactionId;
</script>

<atheon-container interaction-id={interactionId}>
  {@html llmResponse}
</atheon-container>

<atheon-container id="chat-bubble">
  <div id="text-content"></div>
</atheon-container>

<script>
  // Assume these came from your backend API response
  const { reply, interaction_id } = backendResponse;

  document.getElementById('text-content').innerText = reply;
  document.getElementById('chat-bubble').setAttribute('interaction-id', interaction_id);
</script>

Troubleshooting

The tag <atheon-container> is not recognized

If you are using React or Vue, you may see a console warning about an unknown element. This is harmless, but you can suppress it:

  • React: No action needed (React 19+). For older versions or TypeScript, add a declaration: 
    declare namespace JSX {
  interface IntrinsicElements {
    'atheon-container': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { 'interaction-id'?: string };
  }
}
  • Vue: Add the tag to compilerOptions.isCustomElement in your vite.config.js: 
    vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'atheon-container' } } })

Styles not applying?

The <atheon-container> uses Shadow DOM to prevent style leakage. If you want your global CSS to affect the content inside, use CSS custom properties (variables) or inject a <style> tag into the shadow root.