Integration Instructions

• Add the embed script tag to your page (see below).
• The widget renders no UI - render your own chat interface.
• Call window.DograhWidget.startChat() to start a conversation (the agent greeting arrives via onMessage).
• Call window.DograhWidget.sendMessage(text) to send a visitor message; it resolves with the updated transcript, or null if the message could not be delivered.
• Call window.DograhWidget.endChat() to end the active conversation and trigger its completion webhook.
• Use getMessages() to read the transcript at any time.
• Subscribe to onMessage and onChatStateChange to drive your UI. States are idle, starting, ready, waiting, ended, expired, error.
• Call window.DograhWidget.setContext({"{ ... }"}) before startChat() to pass visitor details the page learned after load.

Example - drive your own chat UI

                                                    {HEADLESS_CHAT_EXAMPLE}

Integration Instructions

• Add the embed script tag to your page (see below).
• The widget renders no UI - render your own buttons.
• Call window.DograhWidget.start() to begin a call.
• Call window.DograhWidget.end() to end it.
• Subscribe to onCallStart, onCallEnd, onStatusChange, onError to drive your UI.
• start() must run inside a user-gesture handler (click) so the browser grants microphone access.
• Call window.DograhWidget.setContext({"{ ... }"}) before start() to pass visitor details the page learned after load.

Example - track status in your own state

Mirror the call status into a variable you control, then render whatever UI you like from it. The status values are idle, connecting, connected, failed.

                                                    {`// Vanilla JS - keep your own state, render however you want
let callStatus = 'idle';

window.DograhWidget?.onStatusChange((status) => {
  callStatus = status;
  // ...trigger your render here (re-paint DOM, dispatch event, etc.)
});

document.getElementById('talk-btn').addEventListener('click', () => {
  if (callStatus === 'connected' || callStatus === 'connecting') {
    window.DograhWidget.end();
  } else {
    window.DograhWidget.start();
  }
});`}

React:

                                                    {`function TalkButton() {
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    window.DograhWidget?.onStatusChange(setStatus);
  }, []);

  const isLive = status === 'connected' || status === 'connecting';
  return (
    
  );
}`}

Integration Instructions

• Add a div with id="dograh-inline-container" where you want the widget
• The widget will render inside this container
• You have full control over the container's styling
• The chat panel renders in the container; the conversation starts when the visitor clicks the button
• Call window.DograhWidget.start() to begin the call
• Call window.DograhWidget.end() to end the call

{widgetType === "chat" ? (

Example

                                                        {`Chat with Our Agent

  
`}

) : (

Example React Component

                                                        {`export function DograhAgent() {
  const [isCallActive, setIsCallActive] = useState(false);

  useEffect(() => {
    // Widget will auto-initialize when script loads
    window.DograhWidget?.onCallStart(() => {
      setIsCallActive(true);
    });
    window.DograhWidget?.onCallEnd(() => {
      setIsCallActive(false);
    });
  }, []);

  return (
    
      Talk to Our Agent
      
        {/* Widget renders here */}
      
      
    
  );
}`}

)}