widget (#433)

Author: elizabethtrykin

.gitignore

@@ -1,4 +1,6 @@
 **/.definition
 **/.preview/**
+node_modules/
+dist/
 .env
 .DS_Store

fern/assets/widget.js

@@ -0,0 +1,39 @@
+const WIDGET_TAG = 'vapi-voice-agent-widget';
+const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+const WIDGET_SCRIPT_URL = isLocalhost
+  ? 'http://localhost:9001/widget.js'
+  : 'https://docs-widget.vercel.app/widget.js';
+
+function injectVapiWidget() {
+  console.log('[custom.js] injectVapiWidget called');
+  if (document.querySelector(WIDGET_TAG)) {
+    console.log('[custom.js] Widget already present in DOM');
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.src = WIDGET_SCRIPT_URL;
+  script.async = true;
+  script.onload = () => {
+    console.log('[custom.js] Widget script loaded');
+    // Create the web component after the script loads
+    const widget = document.createElement(WIDGET_TAG);
+    const apiKey = '6d46661c-2dce-4032-b62d-64c151a14e0d';
+    widget.setAttribute('apiKey', apiKey);
+    widget.style.position = 'fixed';
+    widget.style.bottom = '0';
+    widget.style.right = '0';
+    widget.style.zIndex = '9999';
+    document.body.appendChild(widget);
+    console.log('[custom.js] Widget element appended to DOM');
+  };
+  document.body.appendChild(script);
+  console.log('[custom.js] Widget script appended to DOM');
+}
+
+if (document.readyState === 'loading') {
+  console.log('[custom.js] Waiting for DOMContentLoaded');
+  document.addEventListener('DOMContentLoaded', injectVapiWidget);
+} else {
+  injectVapiWidget();
+} 

fern/custom.js

@@ -32,6 +32,7 @@ experimental:
 css: assets/styles.css
 js:
   - path: ./assets/close-playground.js
+  - path: ./custom.js
 navbar-links:
   - type: minimal
     text: Website

fern/docs.yml

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import reactToWebComponent from "react-to-webcomponent";
+import VoiceAgentWidget from "./voice-widget";
+
+const tagName = "vapi-voice-agent-widget";
+console.log('[widget-webcomponent] Checking for custom element', tagName);
+if (!customElements.get(tagName)) {
+  const WebComponent = reactToWebComponent(VoiceAgentWidget, React, ReactDOM, {
+    props: ["apiKey", "apikey"]
+  });
+  customElements.define(tagName, WebComponent);
+  console.log('[widget-webcomponent] Custom element defined:', tagName);
+} else {
+  console.log('[widget-webcomponent] Custom element already defined:', tagName);
+}