Launcher

Using a custom Orb launcher

The Orb launcher can be customized for brand color, icon, text and style. You can use either the new orbstyle or the more traditional message style. See it in action here.

orb (default)

212212

message

316316

Client-side settings

A typical Orb javascript includes several orbConfig settings including the optional launcher setting. This allows you to customize the look and feel of the launcher. Note lines 8-12.

window.orbConfig = {
    connectionOptions: {
        gridUrl: "https://grid.meya.ai",
        appId: "app-xxxxx",
        integrationId: "integration.orb",
    },
    theme: { "brandColor": "#4989ea" },
    launcher: {
        type: "message",
        icon: "streamline-regular/21-messages-chat-smileys/02-messages-speech-bubbles/messages-bubble-question.svg",
        text: "Help",
    },
    container: document.querySelector("#orb-mount"),
    windowApi: true,
};
(function () {
    var script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = "https://cdn.meya.ai/v2/orb.js"
    document.body.appendChild(script)
    var fontStyleSheet = document.createElement("link")
    fontStyleSheet.rel = "stylesheet"
    fontStyleSheet.href = "https://cdn.meya.ai/font/inter.css"
    document.body.appendChild(fontStyleSheet)
})()

Setting

Type

Default

type

One of orb, message

orb

icon

A valid Streamline icon (see below) when in message mode. If ”” or null, then no icon will be shown.

streamline-regular/21-messages-chat-smileys/02-messages-speech-bubbles/messages-bubble.svg

text

A string that includes text that appears on the launcher. Only used in message type of launcher. If ”” or null then launcher will present in icon only mode.

Chat

Examples

launcher: {}

or

launcher: {"type": "orb"}
212212
launcher: {
    type: "message",
    text: null
}
204204
launcher: {
    type: "message",
}
316316
launcher: {
    type: "message",
    text: "Try me",
    icon: null
}
240240
launcher: {
    type: "message",
    icon: "streamline-light/37-science/05-science fiction/science-fiction-alien-1.svg",
    text: null
}
196196
launcher: {
    type: "message",
    icon: "streamline-light/37-science/04-space exploration/space-rocket.svg",
    text: "Blast off!",
}
366366

Using custom icons → Streamline icons

You can use any icons found any icon found in the Light, Regular or Bold collection found in Streamline icons here.

528528

Process for extracting path need for icons

  1. Sign up for Streamline icons account (it’s free).

  2. Navigate to find a suitable icon using the Streamline icon browser.

Only Streamline Light, Regular or Bold icons are supported. You may find some icons may be missing when testing in javascript. Please test step 6 to verify.

  1. Click download and note the file name
14671467 10781078
  1. Look up the nearest file path in this spreadsheet and use that value in the icon setting in javascript.
14581458
  1. Verify that the icon is correctly rendered in your web page.
window.orbConfig = {
    connectionOptions: {
        gridUrl: "https://grid.meya.ai",
        appId: "app-73c6d31d4f544a72941e21fb518b5737",
        integrationId: "integration.orb",
    },
    theme: { "brandColor": "#4989ea" },
    launcher: {
        type: "message",
        icon: "streamline-bold/01-interface-essential/02-dashboard/gauge-dashboard-1-alternate.svg",
    },
    container: document.querySelector("#orb-mount"),
    windowApi: true,
}
332332