Custom Styling of User Interfaces via CSS

Description

This documentation provides guidance on how to utilize custom classes for the chat widget , chat navigatorand search navigator components of our user interfaces.

• Web Components: Our user interfaces are designed as web components. Web components are a suite of different technologies that allow you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. For further details, refer to the MDN documentation on Web Components.
• Style Inheritance: These user interfaces are capable of inheriting certain style elements from the page they are embedded in, such as font-size and font-family. This is intentionally done to ensure the user interface integrates seamlessly with the host page's design. The interfaces are styled using relative units like rem to maintain consistency and scalability across different devices and screen sizes. To understand more about CSS units like rem, visit the W3C guide on CSS units.
• Customization with CSS: To tailor the look of our user interfaces according to your preferences, you can apply custom CSS styles to the pre-defined container listed below for each separate User Interface.
• Applying Custom Styles: You can insert your custom styles within a <style> tag directly in your HTML document or include them in an external .css file. When defining your styles, you may need to use the !important declaration to override the default styling. For example, font-size: 0.7rem !important; ensures that your size specification will take precedence over the existing style.

By following these instructions, you can effectively customize the appearance of the chat widget,chat navigatorand search navigator to match the aesthetic of your website or application.

Specify styles when embedding

You can customize and specify styles already when embedding the Container on your website. More about this option here.

Chat Navigator (chat embed)

#branchly-chat-embed-container {
}

.embed-title {
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
}

Chat Widget

#branchly-chat-widget-container {
}

.widget-header-container {
}

.close-widget-button {
}

.welcome-message {
}

.chat-bubble-container {
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.branchly-branding {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
}

Search Navigator

#branchly-embed-container {
}

.embed-title {
}

.next-nodes-container {
}

.next-node {
}

.search-container {
}

.search-button {
}

.home-button {
}

.content-container {
}

.selected-node {
}

.selected-nodes-container {
}

.search-input {
}

.search-input::-webkit-input-placeholder {
  /* WebKit browsers */
}

.search-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
}

.search-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.search-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
}