foreign-sapphire•15mo ago
chatgpt ui
Hey Voiceflow,
I need to make my voiceflow chatbot basically look like chatGPT UI interface. My team is struggling to create the code. Can anyone provide any examples or steps on how to achieve this? We are using wordpress
9 Replies
To create a Voiceflow chatbot using the
react-chat package, you can follow these steps:
1. Set Up Your Voiceflow Project
- Create a Voiceflow Project: Start by creating a new project in Voiceflow.
- Get Your API Key: Obtain your Dialog Manager API key from Voiceflow.
2. Use the React-Chat Package
- Open-Source Code: Voiceflow offers an open-source Web Chat project called react-chat that you can customize.
- Repository: You can find the repository and further instructions here.
3. Customize the Web Chat Widget
- Custom Actions: Use Custom Actions in your agent's design to build custom components.
- Customizing Web Chat Guide: Refer to the Customizing Web Chat guide to learn how to further customize the chat widget experience.
4. Example Projects
- Demo Project: Check out the demo project for a practical example of how to set up and customize the chat interface. You can find the demo project here.
5. Additional Resources
- Video Tutorials: Watch video tutorials for a walkthrough of the demo code and configuration guidelines.
- Documentation: Refer to the Voiceflow Developer Documentation for detailed instructions and code repositories.
By following these steps, you should be able to create and customize a Voiceflow chatbot using the react-chat package. Please note that you will need the ability to host and maintain code on your own infrastructure.Have a look @ the Custom CSS: Override agent settings and styles section: https://developer.voiceflow.com/docs/embed-customize-styling
foreign-sapphireOP•15mo ago
Can you provide me with some code example, It is not working
extended-salmon•15mo ago
No, it's html
foreign-sapphireOP•15mo ago
Can you show me
Do you have any CSS?
foreign-sapphireOP•15mo ago
/* General chat wrapper styling /
.vfrc-chat-wrapper {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
}
/ Customize the chat header /
.vfrc-header {
background-color: #fff; / Set header background to white /
color: #000; / Ensure text color is readable /
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/ Chat body styling /
.vfrc-chat-body {
background-color: #f9f9f9;
padding: 20px;
font-family: Arial, sans-serif;
flex-grow: 1;
overflow-y: auto;
margin-bottom: 60px; / Make space for the input box /
}
/ Footer styling - fixed at the bottom center /
.vfrc-footer {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 600px;
border-top: 1px solid #ddd;
padding: 10px;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
border-radius: 0 0 10px 10px;
}
/ Styling for the chat input area within the footer /
.vfrc-input {
width: 100%;
border: none;
padding: 10px;
font-size: 1em;
resize: none;
}
/ Message bubble styling /
.vfrc-chat-bubble {
border-radius: 15px;
padding: 10px;
margin-bottom: 10px;
}
.vfrc-chat-bubble--user {
background-color: #0078D7;
color: #fff;
text-align: right;
}
.vfrc-chat-bubble--bot {
background-color: #f1f1f1;
color: #333;
}
I'm trying to hide the vfrc- header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Chatbot UI</title>
<link rel="stylesheet" href="path/to/your/custom.css">
</head>
<body>
<div id="chat-container">
<div id="flat-chat"></div>
</div>
<script type="text/javascript">
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: '7' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
apiKey: '',
render: {
mode: 'embedded',
target: document.getElementById('flat-chat'),
},
autostart: true,
assistant: {
title: "ChatGPT Styled Bot",
description: "Your friendly assistant",
image: "https://path.to/your/logo.png",
stylesheet: "path/to/your/custom.css"
}
});
}
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
</body>
</html>
CSS:
/ Use this file to override default styles when forking this repository /
/
PAGE CONTENTS
Customize the page that the chat bubble lives on
/
.voiceflow-chat {
display: flex;
flex-direction: column;
height: 100vh;
}
/
CHAT WIDGET HEADER
Customize the content, controls, and styling included in your chat widget header, including the Assistant Information.
Note that changes to the assistant information here will be shared across other elements that consume this styling.
/
.vfrc-header {
background-color: #fff; / Set header background to white /
color: #000; / Ensure text color is readable /
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/
CHAT MESSAGE BODY
Customize the layout and display of the chat body, and the conversation's metadata
/
.vfrc-chat {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
background-color: #f9f9f9;
margin-bottom: 60px; / Make space for the footer /
}
.vfrc-message {
border-radius: 15px;
padding: 10px;
margin-bottom: 10px;
}
.vfrc-user-response {
background-color: #0078D7;
color: #fff;
text-align: right;
}
/
FOOTER
Customize the layout and appearance of the message input field and the VF Branding
*/
.vfrc-footer {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 600px;
border-top: 1px solid #ddd;
padding: 10px;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
border-radius: 0 0 10px 10px;
}
.vfrc-input {
width: 100%;
border: none;
padding: 10px;
font-size: 1em;
resize: none;
}
extended-salmon•15mo ago
I added a script using htmlsnippt in the Mebdix program and nothing pops up. Is there a fix?
you are not adding the css to your integration code. You need to use: https://developer.voiceflow.com/docs/embed-customize-styling