Customize Notiondesk Messenger

Customize your Messenger branding, launcher, layout, home screen, modules, languages, and where it can be displayed.

3 min read

You can customize Notiondesk Messenger to match your brand and decide what visitors can access from the widget.

Messenger customization includes its colors, launcher, layout, home screen, support modules, languages, and allowed website domains.

Customize colors and branding

Use the Messenger appearance settings to match Messenger with your website or application.

You can customize colors used throughout Messenger, including:

  • Primary color
  • Background color
  • Text colors
  • Header colors
  • Launcher colors
  • AI and visitor message colors
  • Input colors

You can also configure the fonts used inside Messenger.

These branding settings are controlled from Notiondesk rather than through the JavaScript SDK.

Customize the Messenger launcher

The launcher is the button visitors use to open Messenger.

You can customize:

  • Whether the launcher is displayed
  • Launcher position
  • Launcher shape
  • Side spacing
  • Bottom spacing
  • Launcher colors
  • Custom launcher icon

Change the launcher position

Messenger can appear in either bottom corner of your website:

  • Bottom right
  • Bottom left

Choose the position that avoids overlapping your website navigation, cookie controls, accessibility tools, or other floating elements.

Change the launcher shape

The launcher can use:

  • Rounded square
  • Circle

Choose the shape that best matches your interface.

Use a custom launcher

You can hide the standard Notiondesk launcher entirely and open Messenger from your own interface.

For example, you could open Messenger from:

  • A Help button in your navigation
  • A Contact support button
  • Your account menu
  • A floating button you already use
  • A support section inside your application

Turn off Show launcher in your Messenger configuration, then use the Notiondesk Messenger JavaScript SDK to open or toggle Messenger.

For example:

helpButton.addEventListener("click", () => {
  void notiondesk.toggle();
});

See Control Notiondesk Messenger with the JavaScript SDK for custom launcher examples and SDK controls.

Choose the default Messenger layout

Notiondesk Messenger supports different layouts depending on how you want support to appear inside your product.

Available layouts include:

  • Floating: Messenger opens as a floating panel above your website
  • Sidebar: Messenger opens as a full-height side panel
  • Full screen: Messenger uses the available viewport

Configure the default layout from your Messenger settings.

Messenger also adapts automatically to smaller screens so visitors can use it comfortably on mobile devices.

Choose which Messenger modules are available

Messenger can contain several support modules.

ModulePurpose
HomeCustom starting screen with support content and shortcuts
MessagesAI-powered support conversations
HelpBrowse and search your help center
ContactContact your support team
ChangelogView your latest product updates

Enable only the modules that make sense for your support experience.

Messages

The Messages module provides AI-powered conversations inside Messenger.

A Notiondesk AI Chatbot must be connected and configured for this module.

Visitors can use Messages to ask questions and receive answers based on your support content.

Help

The Help module gives visitors access to your help center without leaving your website.

Visitors can browse categories, open articles, and search your documentation directly inside Messenger.

Contact

The Contact module gives visitors a way to contact your team when self-service support is not enough.

Changelog

The Changelog module surfaces your published product updates directly inside Messenger.

This lets customers discover new features and improvements without leaving your application.

Customize Messenger languages

Configure which languages are available in Messenger and choose its default language.

Only languages enabled for the Messenger can be selected by visitors.

If your application already knows the visitor's preferred language, you can also set Messenger's language programmatically with the JavaScript SDK:

notiondesk.setLanguage("fr");

The requested language must also be enabled in the Messenger configuration.

See Control Notiondesk Messenger with the JavaScript SDK for runtime language synchronization.

Restrict Messenger to trusted domains

You can restrict your Messenger so it only loads on approved website domains.

Use trusted domains when Messenger should only be embedded on websites and applications you control.

For example, you could allow:

www.example.com
app.example.com

When trusted domains are configured, Messenger will not load from an unauthorized website.

This is especially useful when Messenger exposes customer support features intended only for your own application.

Related articles

Was this page helpful?