Carl•5w ago

Colored buttons

is it possible to make my buttons colored in the chatbot? any advice?????

2 Replies

Yes – you can style the quick-reply “buttons” that the assistant sends, but you’ll need to do it with your own CSS. 1. Add (or link) a stylesheet when you load the widget

window.voiceflow.chat.load({
  verify: { projectID: '<ID>' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    // point to a hosted css file …
    stylesheet: 'https://yourdomain.com/chat-styles.css'
    // or embed a base64 data-url
  }
});

window.voiceflow.chat.load({
  verify: { projectID: '<ID>' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: {
    // point to a hosted css file …
    stylesheet: 'https://yourdomain.com/chat-styles.css'
    // or embed a base64 data-url
  }
});

2. Target the button class and customise colours

/* assistant reply buttons */
.vfrc-system-response .vfrc-button {
  background-color: #FF5722;   /* your colour */
  color: #FFFFFF;              /* text colour */
  border-radius: 6px;
}
/* optional hover/active states */
.vfrc-system-response .vfrc-button:hover {
  background-color:#E64A19;
}

/* assistant reply buttons */
.vfrc-system-response .vfrc-button {
  background-color: #FF5722;   /* your colour */
  color: #FFFFFF;              /* text colour */
  border-radius: 6px;
}
/* optional hover/active states */
.vfrc-system-response .vfrc-button:hover {
  background-color:#E64A19;
}

The .vfrc-button selector comes from the widget’s style sheet (all component classes start with .vfrc). You can inspect the widget in your browser dev-tools to confirm the exact class or check the full class list in the docs. That’s it – once the stylesheet is loaded, every button rendered by the assistant will pick up your new colours. Docs: https://docs.voiceflow.com (section “Custom web chat styling → Custom CSS”).

CarlOP•5w ago

is it possible to make my (listening buttons) colored in the chatbot? any advice?????

Colored buttons

Did you find this page helpful?