Result Embedding (Deprecated)

Learn how to embed Cekura agent results in your application using our embed widget. For token management details, see our Token Generation and Token Refresh guides.

Deprecation Notice

All 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

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;

Vue

<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>

Angular

// 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));
  }
}

HTML/JavaScript

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:

• Token Generation Guide
• Token Refresh Guide