To understand (or use) this sample, you'll need to be familiar with Zammo (and preferably have an instance provisioned).
If this is not the case and you are interested in learning more, you can contact the Zammo team using the form at the bottom of this web page.
The Zammo Bot that you create in the Zammo Portal can be exposed in several ways:
- Web chat integration
- Interactive Voice Response
- Behind a digital agent
- At the front of a contact center
In this repository, we are looking at a Voice-only web integration.
This integration combines the benefits of the voice bot (which can be easier and faster to interact with) and the web (which provides infrastructure and integrations on many platforms).
When conducting research or survey projects, this integration can be very useful for providing a way for participants to share feedback.
As speaking is faster than typing, it enables participants to go through more questions as they can do so hands-free and from many devices (including their phones).
When creating a Voice Assistant or an IVR, in the early stages, the voice-only experience can help quickly test the interaction.
The available web interface also provides an avenue for multimodal interactions (using the screen for additional interactions).
You will need to have a valid Zammo account and a created bot.
In the Zammo portal, you will fetch the src, cssUrl, zammoApiBaseUrl, and webchatId. You will also configure the allowed domains for the web integration instance.
To do this, perform the following steps:
- Activate the web chat channel in the Zammo Portal and click
Edit:
- Set the domains field to allow your desired domains, or allow all by supplying * (or an exhaustive list of whitelisted domains):
- Click on "Get My Webchat Code," and the following modal popup is displayed:
- Take note of the following values from the modal popup:
srccssUrlzammoApiBaseUrlwebchatId
Update the sample.HTML page with your credentials in the corresponding section marked with the <!-- ZAMMO CONFIGURATION SCRIPT --> and fill in the details from the Zammo bot credentials in the corresponding section.
Host the sample.html file on any web server capable of serving static content. Some options:
220821030-cf313eea-ff4d-4c4b-b5f3-be2677eda40d.mov
The sample is:
- self-contained for simplicity of hosting
- written in plain JavaScript for extended browser capabilities
The sample makes use of the following open-source libraries:
- Sweet Alert for all of the dialog modals in the application
- JS Base64 to facilitate audio processing
You can use the code to enable your Zammo build bot as a standalone application or import it into your application.
When importing into your application, you can also export the section under <!-- APP SCRIPT -->, and you can adjust or replace any elements to match your branding guidelines.
Some of the key functions are:
initializeBot: which initializes the connection to the bot.processWebSocketMessageallows you to customize how you process the bot response.
Web browsers require that a user interaction is performed before allowing Javascript to use the audio output.
On mobile, there is an additional restriction in which audio needs to be played right after the action to allow the app to play audio later in any asynchronous part.
When making changes, you must ensure these two requirements are met; otherwise, you may experience issues where no sound will be played for the bot prompt.
In the sample, we display a modal to inform the user that the application accesses the microphone. When the user approves, we play a short silence which helps meet the two criteria.
When troubleshooting on mobile, accessing the console to view error messages can be complex. The sample has Eruda imported that you can turn on by passing a query argument debug to the URL where you host the sample.
You can then add additional console.log to the sample and view the debug on mobile or any other device.
We recommend ensuring your changes align with accessibility standards.
Zammo does not accept direct contributions to this repository, but our team would love to get your feedback. The primary channel for sending your feedback will be to use the form on our website.
If you are already a Zammo customer, don't hesitate to get in touch with our Customer Success teams or your account manager.
Copyright Zammo.