exotic-emerald
exotic-emerald16mo ago

Embed the open source Web Chat widget

So I've been able to get the Live Agent working locally from the examples/live-agent folder in this repo: https://github.com/voiceflow/react-chat/tree/master/examples/live-agent I am looking to host the WebChat client and Live Handoff server ( + websocket) on a separate server that connects to my admin dashboard where my clients their live agent employees can send/receive messages in case there's an handoff. How do I embed my customised Web Chat widget on my clients their websites? The only example I found shows a more local approach I think https://github.com/voiceflow/react-chat?tab=readme-ov-file#browser-usage How would I be able to use that JS code to embed my custom Web Chat that is hosted on a remote server?
10 Replies
Tico | Voiceflow Assistant
To embed your customized Web Chat widget on your clients' websites, follow these steps: 1. Clone the Repository: - Clone the react-chat repository to your local machine. - Follow the set-up steps in the main directory's README. 2. Set Up Your Server: - Host the WebChat client and Live Handoff server (including the WebSocket) on a separate server. - Ensure this server can make authenticated requests to the live agent platform. 3. Customize the Web Chat Widget: - Customize the Web Chat widget as needed using the react-chat project. - Make sure your customizations are saved and tested locally. 4. Embed the Widget: - Use the provided JavaScript snippet to embed the Web Chat widget on your clients' websites. This snippet should be included in the HTML of the client’s website where you want the chat widget to appear:
<script src="https://cdn.voiceflow.com/path-to-your-custom-webchat.js"></script>
<script>
window.onload = function() {
VoiceflowWebChat.init({
apiKey: 'YOUR_VOICEFLOW_API_KEY',
serverUrl: 'https://your-server-url',
// Add any other configurations you need
});
};
</script>
<script src="https://cdn.voiceflow.com/path-to-your-custom-webchat.js"></script>
<script>
window.onload = function() {
VoiceflowWebChat.init({
apiKey: 'YOUR_VOICEFLOW_API_KEY',
serverUrl: 'https://your-server-url',
// Add any other configurations you need
});
};
</script>
Replace https://cdn.voiceflow.com/path-to-your-custom-webchat.js with the actual URL where your customized Web Chat widget is hosted. 5. Configuration: - Ensure that the apiKey and serverUrl are correctly set to point to your Voiceflow project and the server hosting the Web Chat widget, respectively. 6. Testing: - Test the integration on a staging environment before deploying it to production to ensure everything works as expected. For more detailed instructions, you can refer to the Voiceflow Live Chat Handoff Guide and the Advanced Web Chat Guide.
adverse-sapphire
adverse-sapphire16mo ago
@idmon did you get this working? it's been days and I still haven't. ridiculous
W. Williams (SFT)
Voiceflow
Embed & Customize Styling
Modify the CSS of your web chat and embed it within a page
W. Williams (SFT)
;(function (d, t) {
var v = d.createElement(t),
s = d.getElementsByTagName(t)[0]
v.onload = function () {
window.voiceflow.chat.load({
verify: { projectID: 'YOUR-PROJECT-ID-HERE' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
render: {
mode: 'embedded',
target: document.getElementById('flat-chat'),
},
autostart: false,
})
}
v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs'
v.type = 'text/javascript'
s.parentNode.insertBefore(v, s)
})(document, 'script')
;(function (d, t) {
var v = d.createElement(t),
s = d.getElementsByTagName(t)[0]
v.onload = function () {
window.voiceflow.chat.load({
verify: { projectID: 'YOUR-PROJECT-ID-HERE' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
render: {
mode: 'embedded',
target: document.getElementById('flat-chat'),
},
autostart: false,
})
}
v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs'
v.type = 'text/javascript'
s.parentNode.insertBefore(v, s)
})(document, 'script')
exotic-emerald
exotic-emeraldOP16mo ago
What's your goal? If you want to get the react-chat up and running with live-agent. I believe VoiceFlow forgot to add some crucial commands. After a couple times reseting the repo I figured it out. Make sure to go into the root folder (not the examples/live-agent folder) but the react-chat root. Now run yarn build. Then when you go into the examples/live-agent folder you can run yarn dev and it should work I don't think exposing the VoiceFlow API key on the clients public website is a good idea. Also when I look into my compiled and build bundle.mjs file I don't see any reference to a scope VoiceflowWebChat with a function init(). This seems like a GPT hallucination or am I just tripping now? Thanks for linking me into this resource but not exactly what I'm looking for. My goal is to use the live-agent example which is a react project client app. But I want to be able to embed the live-agent on client websites in a similar fashion like the JS snippet you sent me that provides the VF_projectID. I don't want to custom host the webchat widget for each client but rather have a single server to streamline the process of scaling my agency.
adverse-sapphire
adverse-sapphire16mo ago
OK great I will give this a go! Thanks for getting back to me idmon
exotic-emerald
exotic-emeraldOP16mo ago
My pleasure.. let me know if it worked out.
adverse-sapphire
adverse-sapphire16mo ago
It did not lol
exotic-emerald
exotic-emeraldOP16mo ago
Whats your current error? Is it still the same errors as previously? Because aside from the yarn build I did some other steps that weren't provided in the guide. But need to know you got a little bit further
adverse-sapphire
adverse-sapphire16mo ago
no im taking a different approach now installing @voiceflow/react-chat package into my nextjs FE and getting a litany of errors, i was able to import the components themselves dynamically, but i cannot import useRuntime

Did you find this page helpful?