AI Integration Guide ‐ Voice Chat Component (SDK)

Modified on Tue, 17 Feb at 8:34 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.

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

Note: By default, the examples above use SDK v3.0. If you prefer to use SDK v6.0, see Section 2.1 below.

2.1 Using SDK v6.0

If you want to use SDK v6.0 instead of v3.0, replace the script tags in Step 2 with the following:

<script>    window._event_config = { agent_name: '##ai_agent##', aiConnectMode: "##ai_connect##", aiMuteOnStart: "##ai_mute_on_start##" }; </script> <script type="module" src="https://mf-cdn.web.app/voice-chat-component-v060.js"></script> <script type="module" src="https://mfdavinci.s3.us-west-1.amazonaws.com/js/event-persistent-script-v060.js"></script>

SDK v6.0 works with the same configuration options as v3.0. If you are migrating from an earlier version, no changes are required unless you want to use new optional features introduced in v6.0.

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: "##ai_connect##", aiMuteOnStart: "##ai_mute_on_start##", dedupeField: "mailerid" };

window._event_config = {  acctID: window._mfaid,  domainPath, // obtained from window.location  agent_name: "##ai_agent##",  dedupeField: "purl",  dedupeValue: window._mfpurl,  contactFieldMap: {    transcript_url: "event_data.audio_transcript",    audio_url: "event_data.audio_recording"  },  aiConnectMode: "##ai_connect##",  aiMuteOnStart: "##ai_mute_on_start##" };