Pavel Čermák 🦾•2w ago

Change 'Open chat agent' tooltip text

Hello, I have been trying to change via css the 'Open chat agent' tooltip message, but havent been able to do so in any way, shape or form. Is there any way how to change/localize this text ? Some of our czech clients complain about it. Thank you very much in advance.

1 Reply

Tico | Voiceflow Assistant•2w ago

At the moment the text that appears when you hover the launcher bubble
(the element with the aria-label “Open chat agent” / “Close chat agent”) is hard-coded inside the widget.
The Web-chat configuration options and the CSS override route only let you change visual styles – they don’t expose a way to replace that tooltip string. Work-arounds you can use today
1. Hide the default launcher and replace it with your own button

<script>
  window.voiceflow.chat.load({
    verify: { projectID: 'YOUR_ID' },
    url: 'https://general-runtime.voiceflow.com',
    versionID: 'production',
    /* any other config */
  }).then(() => {
    // hide the built-in bubble
    window.voiceflow.chat.hide();
  });
</script>

<!-- your custom launcher -->
<button id="my-launcher" title="Otevřít chat">
  <!-- your icon -->
</button>
<script>
  document
    .getElementById('my-launcher')
    .addEventListener('click', () => window.voiceflow.chat.open());
</script>

<script>
  window.voiceflow.chat.load({
    verify: { projectID: 'YOUR_ID' },
    url: 'https://general-runtime.voiceflow.com',
    versionID: 'production',
    /* any other config */
  }).then(() => {
    // hide the built-in bubble
    window.voiceflow.chat.hide();
  });
</script>

<!-- your custom launcher -->
<button id="my-launcher" title="Otevřít chat">
  <!-- your icon -->
</button>
<script>
  document
    .getElementById('my-launcher')
    .addEventListener('click', () => window.voiceflow.chat.open());
</script>

• The built-in bubble is removed (hide()), so users only see the button you control, with any tooltip or label you like.
• You can still call all other API methods (open(), close(), etc.) described in the “Custom triggers” docs. 2. Embed the chat in a fixed section of your page (render.mode = 'embedded') and launch it with your own UI elements.
In embedded mode no bubble is drawn, so the tooltip never appears. Until the widget adds a localisation/i18n option, the above approaches are the only ways to present a Czech tooltip. For full control over every string you can also fork our open-source React-Chat package and host your own build, but that requires a custom deployment. Docs for reference
• Web-chat API methods (show/hide/open/close): https://docs.voiceflow.com (Custom triggers section)

Change 'Open chat agent' tooltip text

Did you find this page helpful?