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)

message

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"}
launcher: {
    type: "message",
    text: null
}
launcher: {
    type: "message",
}
launcher: {
    type: "message",
    text: "Try me",
    icon: null
}
launcher: {
    type: "message",
    icon: "streamline-light/37-science/05-science fiction/science-fiction-alien-1.svg",
    text: null
}
launcher: {
    type: "message",
    icon: "streamline-light/37-science/04-space exploration/space-rocket.svg",
    text: "Blast off!",
}

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.

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
  1. Look up the nearest file path in this spreadsheet and use that value in the icon setting in javascript.
  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,
}