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: {}

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

You can use any icon found in the Streamline Light, Regular or Bold icon sets that are provided by the Meya CDN. Check the Icon path guide to see how to resolve the icon path for a particular Streamline icon.

Once you've got the icon path, you can set the launcher's icon property as follows.

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,
}