Skip to main content

Where the chat appears

The chat button​

The floating button sits in the bottom corner. If your app has a fixed bar along the bottom, such as a mobile tab bar or a cookie banner, the button and the chat sit just above it, so your navigation stays usable.

Using your own button​

Already have a place for help, like an "Ask" tab? Add data-frankie-open to it and a tap opens the chat. To hide the floating button entirely, set launcher={false}:

<FrankieWidget launcher={false} />
<button data-frankie-open>Ask Frankie</button>

On phones​

On screens up to 640px wide, the open chat fills the screen like a native chat app. The page behind it stops scrolling until it closes, and the header and message box stay clear of the notch and the home indicator. Close it with the × in its header. Nothing to configure.

Closing​

Clicking or tapping anywhere outside the open chat closes it, like any popover, and so does Escape. To keep it open until the close button is pressed, set closeOnOutsideClick={false}.

Starter buttons​

The buttons on the welcome screen come only from what you add under Widget. With none added, the welcome screen shows just the greeting.

Message box placeholder​

The text in the empty message box is set next to the greeting under Widget, as Message box placeholder (up to 120 characters). Left blank, it reads "Ask name anything…", using your widget's name. A placeholder prop on the component wins over the saved one.