{"versionId":"10112aba-92ee-4a8c-8a13-08de86ffd947","articleId":"11cc03b7-7d8d-47f2-974c-08dadefe172f","title":"Callouts","tags":["callouts","engagements","chatbot basics","All articles"],"content":"

What is a callout?

\n

The first message in your welcome engagement can optionally be shown as a callout. 

\n
\n
\"\"
\n
\n


What can I include in a callout?

\n

A callout appears before your bot has been opened on your web page, as an invitation to interact. It can include text, emoji, an image and/or a link.

\n

You can use callouts to highlight content, promote a campaign or event, or provide targeted messaging on specific landing pages.

\n

\n

How do I style my callout?

\n

You can use Helpfruit's built-in CSS Editor to make changes to the default callout style - go to the Custom CSS tab on the Bot Styles page in the Helpfruit portal.

\n

Here are some CSS snippets that may be useful:

\n

Close callout

\n

(by default, the x is currently only visible on hover state)

\n
/* Always show the x button - recommended */\n.callout-close-wrapper {\n    opacity: 100;\n}\n\n\n/* Always show the x button on screens < 768px wide */\n@media screen and (max-width: 768px) { \n    .callout-close-wrapper {\n        opacity: 100;\n    }\n}\n
\n

Callout width

\n

This can be useful if you plan to have a lot of content in your callout.

\n
\n/* Widen message on all screen sizes - recommended*/\n/* Fix right padding to better highlight x */\n.callout-message {\n    max-width: 330px;\n    padding: 10px 25px 10px 10px;\n}\n
\n

Hide callout

\n

Again useful if you have a long callout message - hides it entirely on small mobile screens.

\n
/* Recommend to hide on mobile. */\n/* Do not display callouts on screens < 400px wide */\n/* Update to 340px to show on most mobile devices */\n@media screen and (max-width: 400px) {\n    .callout-message {\n        display: none;\n    }\n    .callout-message-triangle {\n        display: none;\n    }\n    .callout-message-triangle-shadow {\n        display: none;\n    }\n    #myChatButton {\n        bottom:2vh;\n    }\n}
\n

","description":"Callouts show up as a speech bubble when your chatbot loads. The first message in your welcome engagement can optionally be shown as a callout. ","isMarkdown":false,"publishedOnUtc":"2026-03-21T04:29:35.9821342","modifiedOnUtc":"2022-12-16T00:40:11.8296566"}