How can we help?

Show different launcher text and icons on different pages

The launcher button shows the text and icon set in the admin panel on every page where the widget is installed. To show something different on a page, for example "Talk to us" on your website and "Need help?" inside your app, add a short script to that page. A script can also keep the widget hidden on some pages. Setting this up needs a developer.

Setting the launcher text and icon for a page

Add this script to the page, above your NeetoChat JavaScript snippet:

<script>
  window.NeetoChat = window.NeetoChat || {};
  window.NeetoChat.widgetConfig = {
    type: "iconandtext",
    text: "Talk to us",
    image: "message",
  };
</script>

On the pages inside your app, add the same script with your own values, for example text: "Need help?". Pages without this script keep using the admin panel settings. Any option you leave out of the script also keeps its admin panel value.

Launcher options

Option

What it changes

type

What the launcher shows: "iconandtext" for the icon and text, or "icon" for the icon only. On small screens such as phones, the launcher shows only the icon.

text

The launcher text. Keep it within 25 characters, the same limit as the admin panel.

image

The launcher icon: "message", "up", "plus" or "agents", the same four icons you can pick in the admin panel. Use "customicon" to show your own image instead.

customIconUrl

The link to your own icon image, for example "https://example.com/icon.png". It is used only when image is "customicon".

Use the values exactly as written above. A misspelled type hides the text, and a misspelled image hides the icon.

Changing the launcher without a page reload

If your app moves between pages without reloading, such as a single-page app, set the new values and then call updateWidget():

window.NeetoChat.widgetConfig = {
  type: "iconandtext",
  text: "Need help?",
  image: "agents",
};
window.NeetoChat.contextualHelp.updateWidget();

Include every option each time. An option you leave out keeps the value from the previous page, not the admin panel value.

Keeping the widget hidden on a page

To keep the widget hidden on a page and open it from your own button or link, add this script to that page, above your NeetoChat JavaScript snippet:

<script>
  window.NeetoChat = window.NeetoChat || {};
  window.NeetoChat.visibleOnMount = false;
  window.NeetoChat.triggerAction = "hide";
</script>

Setting visibleOnMount to false keeps the widget hidden when the page loads. Setting triggerAction to "hide" hides the whole widget, including the launcher, when the visitor closes it. To open the widget, call NeetoChat.contextualHelp.openWidget().

For example, to show the widget on your website but keep it hidden inside your app, add the script only to the pages inside your app and keep Hidden mode off in the admin panel. The script can only hide the widget. It can't show the widget on a page while Hidden mode is on. To keep the widget hidden on every page, turn on Hidden mode instead.

The widget reads these two options once, when it loads. In an app that moves between pages without reloading, they apply to every page the visitor moves to afterwards.

For other ways to control the widget with JavaScript, see Using JavaScript to control NeetoChat widget.