Install live chat on Vue

Add the Message widget once in your Vue application shell.

Get your embed identifier

Open https://app.message.com/settings/chats/installation and copy the data-site-id value. Use the public site embed identifier, not a workspace JWT or workspace ID.

Mount once

Place this in the persistent root layout or shell. Replace YOUR_EMBED_ID. Do not inject another script for each route. The widget has no public destroy method, so removing just the script on navigation does not unmount its interface.

Mount once

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  if (document.querySelector('script[data-site-id]')) return;
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.message.com/widget.js';
  script.setAttribute('data-site-id', 'YOUR_EMBED_ID');
  document.head.appendChild(script);
});
</script>
<template><slot /></template>

Single-page navigation

The widget observes supported browser history changes itself. Do not call the old Message.update route example. Test your router’s navigation and the page information visible to the agent.

Identity and private data

The shipped widget does not provide a public identify, signout or userHash login API. Browser continuity and a pre-chat email are not proof of account ownership. Use the connector’s supported customer-verification flow before disclosing private order information.

Verify the published installation

Test the published page in a separate browser session. Confirm widget.js loads, the launcher opens, a visitor message reaches Inbox and an agent reply returns. Test with your site’s actual content security policy, consent controls and mobile layout.

The script connects to its own origin by default. With the standard snippet, allow the relevant script and HTTPS/WSS requests to app.message.com. Check image, media and injected-style requirements separately. Do not put an agent JWT or integration secret in the page.