harsh-harlequin•15mo ago

Chatbot Customization

Hi, how can I change the language/format of vfrc-chat--session-time AND vfrc-chat--status?

1 Reply

To customize your Voiceflow Web Chat, you can use custom CSS. Here’s how you can do it: 1. Identify the Elements: The elements you want to target begin with .vfrc. You can find the list of classes in the react-chat repository on GitHub. 2. Custom CSS: Use custom CSS to style these elements. You need to target them using their class names. 3. Apply the CSS: You can apply this CSS by linking to your self-hosted stylesheet in the Voiceflow Web Chat configuration. Example configuration in JavaScript:

window.voiceflow.chat.load({
  projectID: 'your_project_id',
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    title: 'Your Assistant Title',
    description: 'Your Assistant Description',
    image: 'your_image_url',
    color: 'your_color',
    stylesheet: 'link_to_your_stylesheet.css'
  }
});

window.voiceflow.chat.load({
  projectID: 'your_project_id',
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    title: 'Your Assistant Title',
    description: 'Your Assistant Description',
    image: 'your_image_url',
    color: 'your_color',
    stylesheet: 'link_to_your_stylesheet.css'
  }
});

This will ensure that your custom styles are applied to the elements. For more detailed information, you can refer to the Voiceflow documentation on customizing web chat.

Chatbot Customization

Did you find this page helpful?