Result Embedding (Deprecated)

Deprecation NoticeAll embedding features are being deprecated and will be removed from shortly.
We recommend that you do not build new integrations using this feature.Recommended Alternative: We recommend integrating Cekura into your platform via our APIs. We also have an MCP server to make it easier for you — simply ask Claude Code to use the Cekura MCP and get a UI quickly!If you have existing integrations using Result Embedding, please plan to migrate to our APIs before the removal date.

Prerequisites

Cekura API key
Agent ID
Development environment for your chosen framework

URL Structure

The embed URL follows this pattern:

https://dashboard.cekura.ai/embed/{agentId}/result/{resultId}?token={token}&theme={theme}

Where:

{agentId}: Your agent’s unique identifier
{resultId}: Either ‘all’ to view all results, or a specific result ID
{token}: Your authentication token
{theme}: Theme preference (‘dark’ or ‘light’)

Framework Implementations

React
Vue
Angular
HTML/JavaScript

import { useEffect, useState } from 'react';

const VoceraEmbed = ({ agentId, resultId = 'all', theme = 'light' }) => {
const [token, setToken] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const handleMessage = async (event) => {
// Token expired event
if (event.data === 'token_expired') {
try {
await refreshToken(); // See /embed/refreshing-expired-token for implementation
} catch (err) {
setError('Failed to refresh token');
}
}

    };

    const initializeToken = async () => {
      try {
        const newToken = await initToken(); // See /embed/generate-token for implementation
        setToken(newToken);
      } catch (err) {
        setError('Failed to initialize token');
      }
    };

    window.addEventListener('message', handleMessage);
    initializeToken();

    return () => window.removeEventListener('message', handleMessage);

}, [agentId, resultId]);

if (error) return <div className="error-message">{error}</div>;
if (!token || isLoading) return <div className="loading-state">Loading...</div>;

return (
<iframe
src={`https://dashboard.cekura.ai/embed/${agentId}/result/${resultId}?token=${token}&theme=${theme}`}
className="w-full h-[950px] border-0"
allowFullScreen
loading="lazy"
title="Cekura Embed"
/>
);
};

export default VoceraEmbed;

<template>
  <div class="vocera-embed-container">
    <div v-if="error" class="error-message">{{ error }}</div>
    <iframe
      v-else-if="token && !isLoading"
      :src="embedUrl"
      class="w-full h-[950px] border-0"
      allowfullscreen
      loading="lazy"
      title="Cekura Embed"
    />
    <div v-else class="loading-state">Loading...</div>
  </div>
</template>

<script>
export default {
  name: 'VoceraEmbed',
  props: {
    agentId: {
      type: String,
      required: true
    },
    resultId: {
      type: String,
      default: 'all'
    },
    theme: {
      type: String,
      default: 'light',
      validator: value => ['dark', 'light'].includes(value)
    }
  },
  data() {
    return {
      token: null,
      isLoading: true,
      error: null
    }
  },
  computed: {
    embedUrl() {
      return `https://dashboard.cekura.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}&theme=${this.theme}`;
    }
  },
  methods: {
    async handleMessage(event) {
      if (event.data === 'token_expired') {
        try {
          await this.refreshToken(); // See /embed/refreshing-expired-token
        } catch (err) {
          this.error = 'Failed to refresh token';
        }
      }

     
    },
    async initializeToken() {
      try {
        this.token = await this.initToken(); // See /embed/generate-token
      } catch (err) {
        this.error = 'Failed to initialize token';
      }
    }
  },
  async mounted() {
    window.addEventListener('message', this.handleMessage);
    await this.initializeToken();
  },
  beforeUnmount() {
    window.removeEventListener('message', this.handleMessage);
  }
};
</script>

<style scoped>
.error-message {
  color: red;
  padding: 1rem;
}
.loading-state {
  padding: 1rem;
  text-align: center;
}
</style>

// vocera-embed.component.ts
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-vocera-embed',
  template: `
    <div class="vocera-embed-container">
      <div *ngIf="error" class="error-message">{{ error }}</div>
      <iframe
        *ngIf="token && !isLoading"
        [src]="embedUrl"
        class="w-full h-[950px] border-0"
        allowfullscreen
        loading="lazy"
        title="Cekura Embed"
      ></iframe>
      <div *ngIf="!token || isLoading" class="loading-state">Loading...</div>
    </div>
  `,
  styles: [`
    .error-message {
      color: red;
      padding: 1rem;
    }
    .loading-state {
      padding: 1rem;
      text-align: center;
    }
  `]
})
export class VoceraEmbedComponent implements OnInit, OnDestroy {
  @Input() agentId!: string;
  @Input() resultId: string = 'all';
  @Input() theme: 'dark' | 'light' = 'light';

  token: string | null = null;
  isLoading = true;
  error: string | null = null;

  constructor(private sanitizer: DomSanitizer) {}

  get embedUrl(): SafeUrl {
    const url = `https://dashboard.cekura.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}&theme=${this.theme}`;
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  async handleMessage(event: MessageEvent): Promise<void> {
    if (event.data === 'token_expired') {
      try {
        await this.refreshToken(); // See /embed/refreshing-expired-token
      } catch (err) {
        this.error = 'Failed to refresh token';
      }
    }


  }

  async ngOnInit(): Promise<void> {
    window.addEventListener('message', this.handleMessage.bind(this));
    try {
      this.token = await this.initToken(); // See /embed/generate-token
    } catch (err) {
      this.error = 'Failed to initialize token';
    }
  }

  ngOnDestroy(): void {
    window.removeEventListener('message', this.handleMessage.bind(this));
  }
}

class VoceraEmbed {
  constructor(containerId, agentId, resultId = 'all', theme = 'light') {
    this.container = document.getElementById(containerId);
    this.agentId = agentId;
    this.resultId = resultId;
    this.theme = theme;
    this.token = null;
    this.isLoading = true;
    
    this.init();
  }

async init() {
try {
this.token = await this.initToken(); // See /embed/generate-token
this.createIframe();
window.addEventListener('message', this.handleMessage.bind(this));
} catch (err) {
this.showError('Failed to initialize token');
}
}

handleMessage(event) {
if (event.data === 'token_expired') {
this.handleTokenExpiration();
}

}

async handleTokenExpiration() {
try {
await this.refreshToken(); // See /embed/refreshing-expired-token
this.updateIframe();
} catch (err) {
this.showError('Failed to refresh token');
}
}

createIframe() {
const iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '950';
iframe.style.border = '0';
iframe.allowFullscreen = true;
iframe.loading = 'lazy';
iframe.title = 'Cekura Embed';

    this.iframe = iframe;
    this.updateIframe();
    this.container.appendChild(iframe);

}

updateIframe() {
if (this.iframe && this.token) {
this.iframe.src = `https://dashboard.cekura.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}&theme=${this.theme}`;
}
}

showError(message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.style.color = 'red';
errorDiv.style.padding = '1rem';
errorDiv.textContent = message;

    this.container.innerHTML = '';
    this.container.appendChild(errorDiv);

}

hideLoading() {
const loadingElement = this.container.querySelector('.loading-state');
if (loadingElement) {
loadingElement.remove();
}
}
}

// Usage examples
const allResults = new VoceraEmbed('vocera-embed', 'YOUR_AGENT_ID', 'all', 'dark'); // View all results with dark theme
const specificResult = new VoceraEmbed('vocera-embed', 'YOUR_AGENT_ID', 'RESULT_ID', 'light'); // View specific result with light theme

Event Handling

Each framework implementation above includes handlers for these core events:

// Token expired event
if (event.data === 'token_expired') {
  await refreshToken(); // See /embed/refreshing-expired-token for implementation
}

For token management implementation details, refer to:

Get Started

Key Concepts

Guides

Integrations

Advanced

Result Embedding (Deprecated)

Prerequisites

URL Structure

Framework Implementations

Event Handling

​Prerequisites

​URL Structure

​Framework Implementations

​Event Handling

Prerequisites

URL Structure

Framework Implementations

Event Handling