Result Embedding

Prerequisites

Vocera API key
Agent ID
Development environment for your chosen framework

URL Structure

The embed URL follows this pattern:

https://dashboard.vocera.ai/embed/{agentId}/result/{resultId}?token={token}

Where:

{agentId}: Your agent’s unique identifier
{resultId}: Either ‘all’ to view all results, or a specific result ID
{token}: Your authentication token

Framework Implementations

import { useEffect, useState } from 'react';

const VoceraEmbed = ({ agentId, resultId = 'all' }) => {

  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.vocera.ai/embed/${agentId}/result/${resultId}?token=${token}`}

      className="w-full h-[950px] border-0"

      allowFullScreen

      loading="lazy"

      title="Vocera Embed"

    />

  );

};

export default VoceraEmbed;

import { useEffect, useState } from 'react';

const VoceraEmbed = ({ agentId, resultId = 'all' }) => {

  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.vocera.ai/embed/${agentId}/result/${resultId}?token=${token}`}

      className="w-full h-[950px] border-0"

      allowFullScreen

      loading="lazy"

      title="Vocera 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="Vocera 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'

    }

  },

  data() {

    return {

      token: null,

      isLoading: true,

      error: null

    }

  },

  computed: {

    embedUrl() {

      return `https://dashboard.vocera.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}`;

    }

  },

  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="Vocera 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';

  token: string | null = null;

  isLoading = true;

  error: string | null = null;

  constructor(private sanitizer: DomSanitizer) {}

  get embedUrl(): SafeUrl {

    const url = `https://dashboard.vocera.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}`;

    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') {

    this.container = document.getElementById(containerId);

    this.agentId = agentId;

    this.resultId = resultId;

    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 = 'Vocera Embed';

    this.iframe = iframe;

    this.updateIframe();

    this.container.appendChild(iframe);

  }

  updateIframe() {

    if (this.iframe && this.token) {

      this.iframe.src = `https://dashboard.vocera.ai/embed/${this.agentId}/result/${this.resultId}?token=${this.token}`;

    }

  }

  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'); // View all results

const specificResult = new VoceraEmbed('vocera-embed', 'YOUR_AGENT_ID', 'RESULT_ID'); // View specific result

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

API Documentation

Embedding Documentation

Result Embedding

Prerequisites

URL Structure

Framework Implementations

Event Handling

Get Started

Key Concepts

Guides

API Documentation

Embedding Documentation

​Prerequisites

​URL Structure

​Framework Implementations

​Event Handling

Prerequisites

URL Structure

Framework Implementations

Event Handling