Notiondesk Messenger brings your Notiondesk help center directly into your website or web application.
Visitors can use Messenger to search your help center, read articles, chat with your AI assistant, view changelog updates, and contact your team without leaving your website.
This guide explains how to install Notiondesk Messenger on a standard website.
Before you start
Before installing Notiondesk Messenger, make sure you have:
- A Notiondesk help center
- A Messenger configured in Notiondesk
- Access to your website's code or site-wide custom code settings
- Your unique Notiondesk Messenger installation snippet
Choose an installation method
Use the installation method that matches your website.
| Website type | Recommended method |
|---|---|
| Standard HTML or multi-page website | JavaScript snippet |
| React | Notiondesk Messenger SDK |
| Next.js | Notiondesk Messenger SDK |
| Vue | Notiondesk Messenger SDK |
| Nuxt | Notiondesk Messenger SDK |
| Other single-page application | Notiondesk Messenger SDK |
For most traditional websites, the JavaScript snippet is the simplest installation method.
Install Messenger on a standard website
1. Copy your Messenger installation code
Open your Messenger settings in Notiondesk and find the Installation section.
Copy the installation snippet generated for your Messenger.
The code has this format:
<script
async
src="https://static.notiondesk.help/messenger/widget.js"
data-messenger-id="YOUR_MESSENGER_ID">
</script>YOUR_MESSENGER_ID identifies the Messenger that should load on your website.
Copy the snippet from your own Notiondesk dashboard instead of copying a Messenger ID from another website or account.
2. Add the snippet to your website
Paste the Messenger snippet immediately before the closing </body> tag:
<body>
<!-- Your website -->
<script
async
src="https://static.notiondesk.help/messenger/widget.js"
data-messenger-id="YOUR_MESSENGER_ID">
</script>
</body>If your website uses a shared layout, template, footer, or site-wide custom code section, add the snippet there once so Messenger loads across the entire website.
If Messenger should only appear on specific pages, include the snippet only on those pages.
3. Publish your changes
Save and deploy or publish your website after adding the snippet.
The Messenger code must be present on the published website. Adding the code only to a local or unpublished version will not make Messenger available to visitors.
Verify the installation
Open the published website in your browser.
A successful installation should load the Notiondesk Messenger launcher on pages containing the installation code.
Open Messenger and verify that the expected Notiondesk content appears.
You can test:
- Opening and closing Messenger
- Searching your help center
- Opening an article
- Starting an AI conversation if the AI Chatbot is enabled
- Opening any other Messenger sections you have enabled
If Messenger does not appear, open your browser's developer tools and check whether the widget is loading successfully.
React, Next.js, Vue, Nuxt, and SPAs
React, Next.js, Vue, Nuxt, and other single-page applications should use the official @notiondesk-so/messenger-js-sdk package instead of manually adding the standard script snippet.
Install the package with:
npm install @notiondesk-so/messenger-js-sdkYou can also install it with Yarn or pnpm.
The SDK provides dedicated integrations for:
- JavaScript and TypeScript
- React
- Next.js
- Vue
- Nuxt
The SDK also provides methods for showing, hiding, toggling, configuring, and destroying Messenger.
Framework integrations must initialize Notiondesk Messenger on the client side. Do not initialize the Messenger SDK during server-side rendering.
Do not install both the standard Messenger snippet and the SDK in the same application unless you intentionally manage separate Messenger instances.
For a complete framework setup, see Install Notiondesk Messenger with React and Next.js guide.
Troubleshooting
Messenger does not appear
Check the following:
- Confirm that the Messenger snippet exists on the page
- Confirm that the snippet contains the correct
data-messenger-id
- Confirm that your latest website changes were published
- Refresh the page after deployment
- Check the browser console for JavaScript or Content Security Policy errors
- Check the Network panel and confirm that
widget.jsis not being blocked
Messenger appears on some pages but not others
Notiondesk Messenger only loads on pages containing the installation code.
Move the snippet into your site's global layout, template, or footer if Messenger should appear on every page.
The wrong Messenger appears
The data-messenger-id determines which Notiondesk Messenger is loaded.
Copy the installation snippet again from the correct Messenger in your Notiondesk dashboard.
Messenger is blocked by a Content Security Policy
A restrictive Content Security Policy can prevent third-party JavaScript or network requests from loading. Check the browser console for CSP errors if the Messenger script is present but does not load.
Your site's Content Security Policy must allow the resources required by Notiondesk Messenger.
Messenger works after refreshing but not during SPA navigation
Single-page applications do not perform a complete page reload during normal navigation.
Use @notiondesk-so/messenger-js-sdk for React, Next.js, Vue, Nuxt, and other SPA-based applications instead of relying on the standard installation snippet.
An identified user is not recognized
Confirm that your backend generates a valid, non-expired Notiondesk user token.
Do not generate the token in browser code.
When a user logs out, remove the user token from the Messenger configuration or destroy the Messenger instance before starting another user session.
Messenger is hidden behind another element
The Messenger SDK supports a custom zIndex configuration.
Increase the Messenger stacking value if another fixed or floating element is displayed above the Messenger launcher or panel.