Skip to content

Client-Side Integration

The Presentation Layer is responsible for rendering the integrated content and reporting analytics (Impressions & Clicks).

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

  1. Shadow DOM Isolation: Ensuring ads don't break your UI styles.
  2. Viewability Tracking: Only counting impressions when the user actually sees the unit.
  3. Click Attribution: Securely handling user interaction.

1. Load the Script

Add the Atheon loader to the <head> of your application (or your root layout file) by copying directly your project settings from Atheon's Gateway Dashboard. This registers the custom element in the browser.

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

2. Render the Container

You need to wrap your text renderer (Markdown, HTML, or plain text) with the <atheon-container> tag.

You must pass the tracking object (received from your server in the previous step) as a stringified JSON attribute named data-atheon.

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

export const ChatMessage = ({ content, tracking }) => {
  // 1. Stringify the config
  const configString = JSON.stringify(tracking || {});

  return (
    // 2. Render the Custom Element
    <atheon-container data-atheon={configString}>
      <Markdown>{content}</Markdown>
    </atheon-container>
  );
};

<template>
  <atheon-container :data-atheon="configString">
    <div v-html="content"></div>
  </atheon-container>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps(['content', 'tracking']);
const configString = computed(() => JSON.stringify(props.tracking || {}));
</script>

<script>
  export let content;
  export let tracking;
  $: configString = JSON.stringify(tracking || {});
</script>

<atheon-container data-atheon={configString}>
  {@html content}
</atheon-container>

<atheon-container id="ad-container">
  <div id="content-body">...</div>
</atheon-container>

<script>
  // Assume 'tracking' came from your API
  const container = document.getElementById('ad-container');
  container.setAttribute('data-atheon', JSON.stringify(tracking));
</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+) or use // @ts-ignore in TSX.
  • Vue: Add the tag to compilerOptions.isCustomElement in your vite.config.js.

Styles not applying?

The <atheon-container> uses Shadow DOM to protect the ad styles. If you want your global CSS to affect the content inside, you may need to inject styles or use CSS variables.