SupportHubSupportHub/ docs
Back
Advanced
Widget / Advanced

Advanced features

Custom CSS, the notification sound, the mini app and the email bridge.

Custom CSS

The “Custom CSS (optional)” field in SettingsWidget BuilderAdvanced (advanced.custom_css, up to 50,000 characters). The widget inserts this CSS into the <head> of the visitor’s page as a separate <style id="sh-widget-custom-styles"> tag, once, when it loads on the page. If the field is empty, no tag is added.

The styles aren’t isolated and apply to the whole page, so start your selectors with #sh-widget-panel or .sh-… classes. On save, the backend rejects @import, expression(…), javascript: and url() with any scheme other than data:; relative paths are allowed.

custom_css (example)css
/* Remove the panel shadow */
#sh-widget-panel { box-shadow: none !important; }

/* Switch the font to Inter (assuming it's already loaded) */
#sh-widget-panel * { font-family: "Inter", sans-serif; }

/* Your own button color instead of the accent color */
.sh-btn { background: #ff5722 !important; }

Notification sound

The “Notification sound” toggle in the Advanced section. When it’s on, the widget plays a sound when a new operator (or AI) message arrives in the conversation over the WebSocket. Bot and system messages are silent, and there’s at most one sound per 0.7 seconds. It’s off by default.

advanced.sound.enabled
Type: booleanDefault: false
Turn the sound on.
advanced.sound.url
Type: string (up to 500 chars)Default: null
The “Custom sound URL (optional)” field, shown once the sound is on. A link to an audio file hosted anywhere: the builder has no file upload. The file plays at volume 0.6. If the field is empty, a built-in synthesized two-tone chime plays, so there’s a sound even without your own file.

Mini App

An iframe in a widget tab: for example, a customer account, a calculator or an order status page. The Mini App toggle in SettingsWidget BuilderTabs turns the tab on, and the page is set in SettingsWidget BuilderMini App: “App URL”, “Title” and “Height (px)”.

The tab appears in the bottom navigation only when the toggle is on and a URL is set (computed.miniapp_visible in the /config response). The tab name is the widget’s built-in text (“App” in the English interface) with a generic icon; the “Title” field doesn’t change it.

tabs.miniapp_enabled
Type: booleanDefault: false
The Mini App toggle in the Tabs section. The tab shows only if miniapp.url is set as well.
miniapp.url
Type: stringDefault: null
The page loaded in the iframe. It must allow embedding (X-Frame-Options / frame-ancestors), otherwise the browser won’t show it. Without a URL, visitors don’t see the tab, and in the builder preview it says “This app isn’t set up yet”. The iframe opens with sandbox="allow-scripts allow-forms allow-same-origin", so popups and navigating the whole page are blocked.
miniapp.title
Type: stringDefault: "App"
Only the iframe’s title attribute (read by screen readers). It doesn’t change the tab name.
miniapp.height_px
Type: numberDefault: 480
The iframe height in pixels, the same on every device. The builder allows 240 to 960; the API accepts 120 to 1200.

Email bridge

The email bridge continues the conversation by email when the visitor isn’t in the chat. The settings are in SettingsWidget BuilderEmail Bridge. The bridge works only if it’s on and a bridge channel is selected: an email channel from SettingsChannels that sends the emails. Without a channel, the bridge does nothing.

  • Asking for an email. If the visitor writes outside working hours (SettingsWork Hours) and the contact has no email yet, a card with an email field appears in the chat in reply to the first message of a new conversation. If no schedule is set, the project counts as always open, and the card doesn’t appear.
  • Operator replies by email. If the visitor isn’t in the widget when the operator replies (no live connection), the reply also goes to the contact’s email, using the “Operator reply” template in SettingsEmail Templates.
  • Acknowledgement email. Only if the “Send auto-ack email” toggle is on: sent after the visitor’s message, once per ticket, if the contact has an email, using the “Acknowledgement” template in SettingsEmail Templates. If that template is turned off there, nothing is sent.
email_bridge.enabled
Type: booleanDefault: false
The “Enable email bridge” toggle.
email_bridge.bridge_channel_id
Type: stringDefault: null
The email channel the emails are sent through, picked from the project’s email channels. If none is selected, no emails go out and the card isn’t shown.
email_bridge.label
Type: string | { ru, en }Default: "Email for reply"
The “Form label” field: the title of the email card in the chat.
email_bridge.hint
Type: string | { ru, en }Default: "We'll email you the reply"
The “Hint text” field: the line under the card’s title.
email_bridge.auto_ack
Type: { enabled, subject, body }Default: { false, null, null }
enabled is the “Send auto-ack email” toggle: the acknowledgement email goes out only while it’s on, and only while the “Acknowledgement” template in Email Templates is on. The builder has no subject or body fields: you edit the email text in Email Templates (the “Edit the email text” link under the toggle). subject and body from older configs are used once, to fill that template if it doesn’t exist yet.
Was this page helpful?