Customize chat widget

With Tiledesk, you can not only customize the appearance of your chat widget but also manage its visibility, behavior, and features. This tutorial will guide you through various customization options to ensure the widget fits seamlessly into your website.

The following elements can be modified via the Tiledesk dashboard, under the Settings > Widget

1. Widget Appearance

You can adjust the look and feel of your Tiledesk widget directly in the Widget Appearance section.

Here’s what you can customize:

• Themes: There are some themes available. You can choose one and preview the widget in the right section.

• Or use the Custom colors:

  • Primary Color: This color is used as the background for key elements such as buttons.

  • Secondary Color: Applied to the text and icons.

  • Primary Color Gradient: Enable or disable the gradient effect on the primary color.

• Upload Logo:

  • Your logo should be less than 1024KB and ideally 78px x 78px in size. We recommend using PNG or GIF with a transparent background for the best display.

• Widget Alignment: Choose whether to display the widget on the left or right side of the page.

Once you make these changes, you’ll see the live preview on the right side of the screen. Don’t forget to click the Save button to apply them.

2. Widget Visibility

Control where and when the widget is shown on your website.

• Desktop Version:

  • Toggle On/Off: You can fully hide or show the widget.

  • Display Mode: Choose whether the widget stays Open, Closed, or remembers its Last State.

• Mobile Version:

  • Toggle On/Off: Manage visibility for mobile users.

  • Display Mode: Similar to desktop, choose whether it stays Open, Closed, or at its Last State.

3. Single Conversation Mode

Enable Single Conversation mode to restrict the widget to only one ongoing conversation at a time.

This feature simplifies the experience for users and prevents multiple open conversations. It also hides the list of open and archived conversations.

4. Unbranding

• Widget Footer Unbranding:

  • Remove the "Powered by" text in the widget footer by deleting this string in the settings. You can also replace the footer logo and URL with your custom branding.

• Custom Launcher Button:

  • You can replace the launcher button image with your logo. Supported image formats include PNG, JPG, and SVG, with a recommended size of 60x60px.

Note: The Unbranding feature is available only for the Pro Plan and higher.

5. Greetings

Customize the messages shown to users when they open the chat.

• Welcome Message: Greet visitors with a personalized message when they open the chat.

• Team Intro: Introduce your team and explain how you can assist.

• Online/Offline/Out of Office Messages: Set custom messages for when your team is available or offline.

Changes made to greetings will immediately appear in the preview, and you can save them by clicking Save.

6. Reply Time

You can display your team's average response time to users.

• Single Message: Display a message like "The team will reply as soon as possible."

• Average Reply Time: Use a dynamic message such as "The team typically replies in $reply_time."

If the average reply time is unavailable, you can configure a different message to be shown.

7. Callout

• Enable/Disable Callout: This feature allows you to show a prompt for users.

• Timer: Set a delay in seconds before the callout appears.

• Title and Message: Customize the title and message that will appear in the callout.

8. Multilanguage Support

You can add multiple languages to your widget

• Default Language: The default language is English, but you can change it anytime.

• Adding Languages: Click Manage to add a new language. You can select from over 100 languages. Some languages come pre-translated, while others need manual translation.

• Making a Language Default: Once you add a new language, click Make Default to apply it. You can also manually edit translations on the same page and save them.

9. Display on Specific Pages

The widget can be displayed only on specific pages. You can configure this by enabling the option and defining regular expressions to match the URLs where the widget should appear.

10. Advanced Settings

Manage additional features of the widget

• Attachments:

  • Enable/Disable Attachments: Allow users to send attachments or hide the attachment button.

  • Allowed File Extensions: Define which file types are acceptable (e.g., .pdf, .png).

• Emojis:

  • Enable/Disable Emojis: Allow users to send emojis or hide the emoji button.

• Voice Recorder:

  • Enable/Disable Voice Messages: Allow users to send voice messages or only text messages by disabling the voice recorder button.

Hope this guide helps you customize your Tiledesk widget to fit your needs. If you need further support, we're here to help!

Email us at [email protected]

You can also explore use cases and find more details on our website: www.tiledesk.com.