Getting started

Introduction

Call

Outbound Call

Embedding Aurora

Via iFrame

Back to documentations

Embedding Aurora via iFrame

Aurora can be embedded into any React app using an iframe wrapper. The provided callAurora function creates and manages an interactive iframe that allows users to start/stop calls with Aurora, adapting to both mobile and desktop environments.

1. How it Works

On first click, the iframe is dynamically created and loaded from:

https://api.hellovoxify.com/call-aurora

Aurora requests microphone access and begins a session once loaded.
On mobile devices, the iframe launches full screen.
On desktop, it appears as a small floating circular widget in the bottom-right corner.
When the iframe sends a micConfirmed message, the widget shrinks back to its 64px floating circle.

2. Installation / Setup

Add the helper function to your project:

function isMobileDevice() {
  return /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(
    navigator.userAgent
  )
}

export function callAurora<T extends object>(
  WrappedComponent: ComponentType<T>
): ComponentType<T> {
  return function CallAuroraWrapper(props: T) {
    const [callActive, setCallActive] = useState(false)
    const [iframeInitialized, setIframeInitialized] = useState(false)
    const iframeRef = useRef<HTMLIFrameElement | null>(null)

    useEffect(() => {
      function onMessage(event: MessageEvent) {
        if (
          typeof event.data === "object" &&
          event.data !== null &&
          event.data.type === "micConfirmed"
        ) {
          console.log("Parent: micConfirmed received")
          if (iframeRef.current) {
            const iframe = iframeRef.current
            iframe.style.position = "fixed"
            iframe.style.width = "64px"
            iframe.style.height = "64px"
            iframe.style.bottom = "1em"
            iframe.style.right = "1em"
            iframe.style.borderRadius = "50%"
            iframe.style.border = "none"
            iframe.style.opacity = "0.8"
            iframe.style.zIndex = "9999"
            iframe.style.background = "rgba(0, 0, 0, 0.3)"
          }
        }
      }
      window.addEventListener("message", onMessage)
      return () => window.removeEventListener("message", onMessage)
    }, [])

    const handleClick = () => {
      let iframe = iframeRef.current

      if (!iframeInitialized && !iframe) {
        iframe = document.createElement("iframe")
        iframe.id = "call-aurora-iframe"
        iframe.src = "https://api.hellovoxify.com/call-aurora"
        iframe.title = "Call Aurora"
        iframe.allow =
          "microphone; camera; autoplay; encrypted-media; fullscreen"

        if (isMobileDevice()) {
          iframe.style.position = "fixed"
          iframe.style.top = "0"
          iframe.style.left = "0"
          iframe.style.width = "100%"
          iframe.style.height = "100%"
        } else {
          iframe.style.position = "fixed"
          iframe.style.width = "64px"
          iframe.style.height = "64px"
          iframe.style.bottom = "1em"
          iframe.style.right = "1em"
          iframe.style.borderRadius = "50%"
        }

        iframe.style.border = "none"
        iframe.style.zIndex = "9999"
        iframe.style.background = "rgba(0, 0, 0, 0.3)"

        document.body.appendChild(iframe)
        iframeRef.current = iframe

        iframe.onload = () => {
          if (iframe && iframe.contentWindow) {
            iframe.contentWindow.postMessage(
              { type: "start", assistantId: "//enter your Assistant ID here//" },
              "*"
            )
            setIframeInitialized(true)
            setCallActive(true)
          }
        }
      } else if (iframe && iframe.contentWindow && iframeInitialized) {
        if (callActive) {
          iframe.contentWindow.postMessage("stop", "*")
          setCallActive(false)
        } else {
          iframe.contentWindow.postMessage(
            { type: "start", assistantId: "//enter your Assistant ID here//" },
            "*"
          )
          setCallActive(true)
        }
      }
    }

    return <WrappedComponent {...props} onClick={handleClick} />
  }
}

3. Usage Example

You can wrap any button or component with callAurora to make it trigger Aurora:

import React from "react"
import { callAurora } from "./callAurora"

function CallButton({ onClick }: { onClick?: () => void }) {
  return (
    <button
      onClick={onClick}
      style={{
        padding: "12px 20px",
        background: "#4a90e2",
        border: "none",
        borderRadius: "8px",
        color: "white",
        cursor: "pointer",
      }}
    >
      Call Aurora
    </button>
  )
}

export default callAurora(CallButton)

When clicked:

The Aurora iframe is injected.
On mobile, it covers the screen.
On desktop, it shows as a floating widget.
Clicking again toggles start/stop.

4. Key Notes

Ensure your domain allows cross-origin iframe embedding (Aurora is hosted on https://api.hellovoxify.com).
Microphone permissions must be granted by the user.
Multiple buttons/components can be wrapped, but they will all control the same iframe instance.
You can customize assistantId values to point to different Aurora assistants (e.g., one for support, another for sales).

Outbound Call

Lumatic.ai Outbound Call

Smarter Conversations Start Here

With VoxSuite, you can deliver better customer service while saving time and money. Let Aurora do the heavy lifting, so you can focus on what matters most.

Book an Aurora Demo