Skip to main content

Install the Messenger SDK

This guide covers production-ready install paths for web applications.

What it is​

Installation connects your app to OXVO Messenger using your inbox baseUrl and websiteToken.

Where to find it in OXVO​

  • Settings → Inboxes → [Your inbox] → Installation
  • Copy or confirm:
    • baseUrl (your OXVO host)
    • websiteToken (inbox token)

When to use it​

Use this page when launching Messenger in:

  • Static HTML or non-framework sites
  • React apps
  • Vue 3 apps
  • Nuxt 3 apps

Option 1: Plain HTML script​

<script
  src="https://OXVO_BASE_URL/packs/js/sdk.js"
  async
  data-oxvo-base-url="https://OXVO_BASE_URL"
  data-oxvo-website-token="YOUR_WEBSITE_TOKEN"
></script>

Auto-init attributes:

  • data-oxvo-locale="en"
  • data-oxvo-position="left" or right
  • data-oxvo-theme="light", dark, or auto
  • data-oxvo-launcher-title="Support"

data-oxvo-base-url and data-oxvo-website-token are required.

Note: For script auto-init, these are the only optional data-oxvo-* attributes parsed from the <script> tag.

Need more startup settings than these attributes?

  1. Define window.oxvoSettings before loading sdk.js.
  2. Keep required script attributes for baseUrl and websiteToken.
  3. Use runtime methods for dynamic changes after init.
<script>
  window.oxvoSettings = {
    launcherVisible: true,
    widgetStyle: 'flat',
    type: 'expanded_bubble',
    showPopoutButton: true,
    useBrowserLanguage: true,
    welcomeTitle: 'Support',
    welcomeDescription: 'Ask us anything',
  };
</script>
<script
  src="https://OXVO_BASE_URL/packs/js/sdk.js"
  async
  data-oxvo-base-url="https://OXVO_BASE_URL"
  data-oxvo-website-token="YOUR_WEBSITE_TOKEN"
></script>

See full bootstrap key reference: Methods reference

Option 2: React (@oxvo/messenger)​

npm i @oxvo/messenger
import { OxvoMessengerProvider } from '@oxvo/messenger';

const BASE_URL = 'https://OXVO_BASE_URL';
const WEBSITE_TOKEN = 'YOUR_WEBSITE_TOKEN';

export function AppShell() {
  return (
    <OxvoMessengerProvider
      baseUrl={BASE_URL}
      websiteToken={WEBSITE_TOKEN}
      lazy={{ enabled: false }}
    >
      <AppRoutes />
    </OxvoMessengerProvider>
  );
}

Option 3: Vue 3 (@oxvo/messenger-vue)​

npm i @oxvo/messenger-vue
import { createApp } from 'vue';
import { createOxvoMessenger } from '@oxvo/messenger-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
  createOxvoMessenger({
    baseUrl: 'https://OXVO_BASE_URL',
    websiteToken: 'YOUR_WEBSITE_TOKEN',
  })
);

app.mount('#app');

Option 4: Nuxt 3 (@oxvo/messenger-vue)​

npm i @oxvo/messenger-vue
// plugins/oxvo-messenger.client.ts
import { createOxvoMessengerNuxtPlugin } from '@oxvo/messenger-vue';

export default defineNuxtPlugin(
  createOxvoMessengerNuxtPlugin({
    baseUrl: 'https://OXVO_BASE_URL',
    websiteToken: 'YOUR_WEBSITE_TOKEN',
  })
);

Use the exact baseUrl shown in Settings → Inboxes → [Your inbox] → Installation.

Verify your install​

  1. Load your app.
  2. Confirm launcher appears.
  3. Open and close Messenger once.
  4. Confirm no console initialization errors.
  5. In OXVO Inbox, send a test message and verify delivery.

Tip: In staged rollouts, start with one inbox and one environment before broad multi-inbox rollout.

Next steps​

📷 Image (optional): Inbox installation page to SDK setup flow
Why: Clarifies how values from OXVO Inbox Installation map directly into app initialization code.
File: docs/images/sdk-installation-flow-from-inbox.png
AI prompt: "Clean documentation screenshot-style mock showing OXVO Inbox Installation screen with baseUrl and websiteToken, connected by arrows to code blocks for HTML, React, Vue, and Nuxt setup; modern SaaS docs style, neutral grays with primary accent, crisp typography, OXVO branding only, no personal data, 1600x1000."