Widget Editor

In the Widget Editor, you set up the behavior, wording, and design of your Widget. Define how you connect with your contacts and adapt Userlike to your business processes, corporate identity, and local data privacy regulations.

You reach the Widget Editor from the Dashboard via Unified Messaging Message settings Widgets and clicking a Widget’s name.

General

Here you find your Widget’s most basic properties – its name, language, and default topic.

  • Give the Widget a name to distinguish it from your other Widgets.
  • Adjust the language of your Widget to tailor it to different audiences.
  • Select your Widget’s default topic to tag all conversations conducted on it accordingly.
  • Enter the URL of a page that this Widget is implemented on. This is the URL we’ll direct your contacts to in the system messages we send them, for example, for unread messages, conversation transcripts, or to verify their identity.

Appearance

Here you define how your Widget and chat button look on your site, their style, color, and position. In the preview to the right you’ll see the effect of your changes. Click the button to open the different views.

  • Set your Website Messenger’s **main and contrasting color**. The main color appears as background of buttons, the Messenger Board and the Messenger’s header area. The contrasting color applies to texts and navigation symbols in all areas where the main color is used. To ensure good visibility, use white on a darker main color and black on a lighter main color.
  • Add a design with graphical shapes to the home screen of your Website Messenger for a more modern look. Your main color remains in place.
  • Select a default operator picture that is displayed to your contacts when no operator is available. It appears in the conversation view and on the Widget, depending on your appearance settings.
  • Add a custom font by providing its name and a URL to its location on your server or any other platform. The font will be used for all texts in your Website Messenger.
  • Choose a button profile to define how prominently the chat button should be displayed for desktop or mobile visitors on your website.
  • Control the chat button’s lateral alignment by toggling its position and offset.
  • Choose between our round and our square button style.

Wording

Here you can customize the text that is displayed in your Widget depending on its chat mode and behavior settings. Use the dropdown menu to reach all settings.

  • **Messenger Board:** Texts displayed on the Widget’s opening screen.
  • **Chat:** Texts displayed in all chat modes, including your estimated response time.
  • **Register Mode:** Texts displayed in Register Mode.
  • **Offline Mode:** Texts displayed when none of your operators is available.
  • **Data Privacy:** Texts only displayed in Data Privacy Mode, including the data privacy notice, which you can enable under **Chat > Behavior**.
  • **Group Select:** Texts displayed in the operator group selection window.
  • **Transcripts:** Texts of the email containing the conversation transcript, which is sent to contacts after a chat. You can also add links to your social media profiles.
  • **Inactivity:** Texts sent to contacts as fallback operator messages if you enable Inactivity prevention under **Chat >Behavior**.
Tip: You can add operator- and contact-related information to your Widget using placeholders.
PlaceholderDescription
{{name}}Responding operator’s name
{{client_name}}Contact’s name
{{client_email}}Contact’s email address
{{loc_city}}Contact’s location (city)
{{loc_country}}Contact’s location (country)

Chat settings

Here you define how your Widget interacts with your contacts. Open the following sections via the dropdown menu.

  • **Behavior:** Define how a conversation should start and run, and enable voice messages, tracking, and conversation transcripts.
  • **Routing:** Select routing modes to connect your contact to the right operator.
  • **Data privacy:** Adjust the data privacy settings to adhere to your local regulations.
  • **Service times:** Define service times and base your Website Messenger’s availability on it.
  • **Advanced:** Adjust detail settings on cookies, contact notifications, transcripts and links.

Behavior Approach

Here you configure how a conversation between you and your contact is started.

Under **Chat > Advanced**, you can choose to hide the Website Messenger button in all chat modes when no operator is available or outside of your service times. Define your service times under **Chat > Service times**.

Online modes

Normal

The default chat mode. Any contact can immediately start a chat by clicking the chat button.

Registration

Any contact can start a chat after filling in a name and email address. This is a powerful feature to collect leads and filter for high-quality chats. Keep the registration optional if you want to also offer support to contacts not willing to leave their data.

Proactive

The Widget automatically pops up to the contact with a message when she has spent a certain amount of time on your website. An operator is notified once the contact responds to your automatic greeting.

Combine **Proactive and Registration Mode** to make your Widget pop up after a certain time and request contacts to register.

Offline modes

Choose how your Widget behaves when operators are unavailable.

  • **Receive all new conversations:** When no operator is available, you receive new conversations with and without contact details. Your contacts can choose to stay anonymous. However, if they do leave without entering their contact information, your response will only reach them if they return to the Website Messenger.
  • **Only receive new conversations with contact details:** When no operator is available, you only receive conversations with contact details. This allows you to filter out spam and focus on serious enquiries by contacts who will definitely receive your reply.
  • **Reassign revisiting contacts to online operator if assigned one is unavailable** If a contact resumes a conversation while the assigned operator is not available, the conversation is forwarded to an available operator. If this option is disabled or no operator is available, we send an automatic offline reply from the operator. You can edit it under under **Wording > Offline Mode.**

Behavior Inactivity prevention

More than in any other customer channel, people expect an immediate reply in chat. Our inactivity prevention feature acts as a safety net and allows you to define automatic actions that are triggered when your operators don’t answer quickly enough.

Unanswered live conversations

Here you define actions for when a contact starts or resumes a conversation while the assigned operator is online. Define a time between 10 seconds and 5 minutes after which one of the following actions is automatically triggered:

  • **Send inactivity message first, reassign conversation if still inactive. ** First, your **inactivity message live** is sent to the contact. If the timer runs out once more without your operator replying, the conversation is assigned to another online operator. If there is no operator available to receive the conversation, your **Inactivity message offline** is sent to the contact. You can adjust both messages under **Wording > Inactivity.**
  • **Reassign conversation immediately.** The conversation is immediately reassigned to another operator. As in the option above, your **Inactivity message offline** is sent to the contact if reassigning fails.

Unanswered offline conversations

Here you define actions for when a contact starts or resumes a conversation while the assigned operator is not available. Define a time between 30 minutes and 48 hours after which one of the following actions is automatically triggered:

  • **Unassign conversation and move it to Inbox.** The conversation is unassigned and moved to the Inbox, where any operator in your group can see and answer it.
  • **Reassign conversation to another operator.** The conversation is reassigned to another, available operator, who can reply right away. Just like for live conversations, the **Inactivity message offline** is sent to contacts if reassigning fails.

Behavior Contact location

We support two different technologies to identify your contact’s location and thereby provide a more personal support. You can gather locations via our backend or the contact’s browser. The latter is more precise.

  • **Don’t gather:** No info about your contact’s location is collected.
  • **Geolocation IP:** You estimate your contact’s location based on her IP address.
  • **Geolocation Browser API:** Your contact’s location is determined through her browser API. This is accurate but the contact needs to grant permission. If she doesn’t or her browser doesn’t support the feature, the location lookup will fall back to Geolocation IP.

Behavior Supported media

Select the media types available to your contacts and operators. Note that the SMS channel does not support media files. Also, these settings only apply to contacts if they’re using the Website Messenger, so it will not affect their media options on other messenger channels.

  • **Operators can share files:** operators can upload and send files in conversations.
  • **Contacts can share files:** contacts can upload and send files in conversations. You can only disable this option for the Website Messenger. If contacts use a different channel, the channel’s own settings apply.
  • **Operators can offer audio calls:** operators can offer audio calls to contacts that are online in conversations via the Website Messenger. Contacts can choose to accept or decline these calls.
  • **Operators and contacts can send voice messages:** operators and contacts can record voice messages and upload them to conversations. Disabling this option will only remove the function for contacts if they’re using the Website Messenger.

Behavior Tracking

Activate third-party tracking by Google Analytics on your Widget to analyze its performance on your website. The Widget will now track Userlike chat events and its data will be accessible in your Google Analytics account.

If you wish to connect a different tracking solution, you can do so using our client tracking API. To learn more, check out this tutorial.

Routing

Here you define how an operator is selected to receive an incoming chat from your contact. This helps you connect your contacts to the best-suited operators.

  • **Default setting:** The chat is routed to an operator from an operator group that you define.
  • **Group Select:** Before the conversation, your contact chooses an operator group from a selection of groups that you define.
  • **Skills:** Your contact is routed to an operator who possesses a skill set that matches the one you define for this Widget.
If you enable the option to hide the Website Messenger button when no operator is available under **Chat > Behavior**, this will also apply when no operator with the right skill set is available.

Data privacy

Here you find the data privacy settings of your Widget. They apply in all chat modes and help you adhere to your local data privacy regulations.

  • **Don’t gather personal data** from your contacts except for data they provide themselves, for example in Registration Mode.
  • Display a link to your privacy policy for full transparency.
  • Show a data privacy notice before the chat to request your contacts’ consent. Customize the text under **Wording > Data Privacy**.
  • Enable or disable Live Preview and identity lookup.

Advanced

Here you can fine-tune your Widget with additional settings:

  • Set a time after which your contacts’ cookies expire. This also defines how long our system recognizes them and when they will have to reauthenticate themselves in order to regain access to their conversation history.
  • Set a time after which conversations are considered inactive and ended. This also defines when the conversation transcript is sent, add-ons are triggered, and the responding operator’s chat slot is freed up.
  • Enable wildcard cookies if you want to use the Widget on multiple subdomains.
  • Adjust your contacts’ notification settings for a more subtle or a more engaging approach.
  • Let Userlike automatically delete empty conversation transcripts.
  • Specify an email address that your contacts can reply to from all emails that they receive from you.
  • Allow contacts to reply to transcript emails via email and receive their replies as messages in the Message Center.
  • Enable the email callback API to handle automatic emails with your own system.
  • Adjust how links sent in conversations are opened.
  • Hide the Userlike logo.

Contact feedback

Survey

  • Enable the survey before the conversation to gather information about the contact’s type of request.
  • Enable the survey after the conversation to gather the contact’s opinion on your support performance.
  • Customize the texts of both survey types.

Rating

  • Enable this feature and adjust the text to invite your contacts to rate your service.
  • Review your chat ratings in the Dashboard under **Analytics**.

Notifications

Here you can define global notification settings for your operators and contacts. Note that the operator notifications set here only apply to events that the relevant operators have subscribed to in their profile settings.

  • **Emails:** Send email notifications for chat events of this Widget to all operators.
  • **Email to group only:** Send email notifications only to operators within the main operator group assigned to this Widget.
  • **Browser notifications:** Send browser notifications for chat events of this Widget to all operators.
  • **Add-ons:** Trigger add-on events on this Widget for all enabled add-ons.
  • Notify contacts about unread messages via email.

Install

Here you find everything you need to integrate the Widget into your website, deploy it in one of our third party plugins, or run it via an external application.

  • **JavaScript Widget code:** Get your unique Widget code, which you need to integrate Userlike into your website.
  • **Credentials for applications:** Find your Widget credentials, the app key and Widget secret, which you need for our third party plugins and applications.

In the section **JavaScript Widget code**, you can choose to replace one of your existing live Widgets with the Widget you’re editing.