AI Integration Guide ‐ Voice Chat Component (SDK)

Modified on Wed, 5 Nov at 3:07 AM

1. Place the Voice Chat Component.

Copy the code below and paste it where you want the widget to appear on your page.

<voice-chat-component data-agent-id="<MINDFIRE_AGENT_ID>" data-account-id="<MINDFIRE_ACCOUNT_ID>"></voice-chat-component>

2. Add the Agent Script.

Copy the script tag below and paste it right before the closing </body> tag.

<!-- MindFire Services JS SDK --> 
<script>
    window._mfaid = "<MINDFIRE_ACCOUNT_ID>"; // Always required.
    window._mfpurl = "<RECORD_PURL>"; // Optional. Use this if you have defined PURL as a field to authenticate the record with.
    window._mfaccessid = "<REMOTE_ACCESS_ID>"; // Optional. Only use if you have defined multiple Remote Access entries for a single domain.
    window._event_config = {agent_name: '##ai_agent##'}; <!-- You must include at least { agent_name: '##ai_agent##' } since a default value cannot be set automatically. 
    // For other optional settings, please refer to Step 4 below. 
</script> 

<script src="https://mf-cdn.web.app/pixel-v030.js"></script> 
<script type="module" src="https://mf-cdn.web.app/voice-chat-component-v030-stg.js"></script> 
<script type="module" src="https://mfdavinci.s3.us-west-1.amazonaws.com/js/event-persistent-script.js"></script>

3. Map visitor information for personalization. (Optional, but highly recommended)

If you want to personalize the chat conversation, define the visitorInfo on the "component" element by mapping the fields to the values in your program data file. Place this after the agent script tag you added in Step 2 above.

Here's an example, modify it based on your data fields:

<script>
  const voiceChatComponent = document.querySelector('voice-chat-component')
  voiceChatComponent.visitorInfo = {
   "First Name": "##firstname##",
   "Last Name": "##lastname##",
   "Email Address": "##email##",
   "Company": "##company##"  
} </script>

4. Event Configuration (Defaults and Customization)

The component uses the following default configuration:

{
    acctID: window._mfaid,
    domainPath, // obtained from window.location
    agent_name: '',
    dedupeField: "purl",
    dedupeValue: window._mfpurl,
    contactFieldMap: {
        transcript_url: "event_data.audio_transcript",
        audio_url: "event_data.audio_recording"
    },
    aiConnectMode: "manual",
    aiMuteOnStart: "unmute"
 }

If you want to override any of the default values, you can do so by extending window._event_config in Step 2, for example:

window._event_config = { agent_name: '##ai_agent##', aiConnectMode: "auto" };