Custom Launcher

Learn how to implement your own button to open Referral Component and display notifications.

The Cello custom launcher allows you to open the Referral Component from any element that you want to use. It can be a button, a menu item, a link and you can use multiple places that open Cello Referral Component. Additionally, you can choose to open it either in a popup or modal view.

Add a custom launcher

1. Choose an element in your app to launch Referral Component. It can be a button, a menu item, a link. Make sure your element has a unique identifier in your application DOM. It can be a class ID, an attribute selector, an element ID.
2. Add the ID or class to the HTML element where you want the Referral Component to open when clicked.

Our function needs a relative parent. So, if you attach it to a button inside the div, the div needs a position: relative .

<ul>
  <li celloAttribute>Invite</li>
  <li class="celloClass">Invite</li>
  <li id="celloId">Invite</li>
</ul>

3. Add this identifier as Custom Launcher Selector under Referrer Experience in Cello Portal .

Add reward in launcher

1.5x activation rate 3.5x sharing rate

Increase the sharing activity of your users by highlighting the reward directly in the referral launcher inside your menu item.

You can get the text for the menu launcher from cello.js. Text will be localized to the referrer’s language and the reward amount is based on the referrer’s campaign.

const labels = await window.Cello("getLabels")
const myCustomLauncherLabel = labels.customLauncher

Disable Cello button

Cello button is a floating action button or bookmark style button provided as a default Referral Component launcher. When integrating a Customer Launcher, you may choose to disable the Cello button or keep it as an additional launcher.

You can choose to disable the default launcher, the Cello button. Go to Referrer experience settings in Cello Portal and uncheck “Show Cello Button”.

Configure notification badge

You can control the behaviour of the notification badge, which is attached to your Custom Launcher Selector by default:

Selector is clickable and shows notifications badge

This is the default behaviour of the Custom Launcher.

<ul>
  <li cello>"Invite"</li>
</ul>

Selector is non-clickable, but shows notifications badge

Does not open the Referral Component. Use this option if you want to place notification badge to a different element then the one that opens the Referral Component, e.g. you want to show the badge notification on the menu item that is one level above from the actual Custom Launcher of Referral Components to increase visibility.

<ul>
  <li cello data-cello-click="false">
    "Invite"
  </li>
</ul>

Selector is clickable and does not show notifications badge

Use this option if you do not want the Custom Launcher to show a notification badge, i.e. you have an additional CTA button that launches Referral Component.

<ul>
  <li cello data-cello-badge="false">
    "Invite"
  </li>
</ul>

Testing notification badge position
To trigger a notification badge to be shown on your Custom Launcher simply visit the referral link, of the same user you are testing with, e.g. moonly.cello.so/pNRB1aYqArN . A link visit will trigger a view notification and a badge will be displayed.

Add announcement selector

Announcement are callout style notifications used to communicate important information to the user if we need to grab their attention and direct them to the Referral Component.

If the Cello button is disabled, the announcement needs to be anchored to one of your Custom Launchers.

Depending on the implementation, the Announcement Selector can be the same as for Custom Launcher, i.e. you can use exactly the same class ID, attribute selector or element ID.

Add this identifier as Announcement Selector under Referrer Experience in Cello Portal.

Here you can also configure where you want announcement to be shown relative to the Announcement Selector by specifying Announcement position and Announcement position offset.

Testing Announcement position
While choosing Announcement Selector and choosing its position, you will want to see how it looks and make necessary adjustments. You can trigger an announcement using Cello JS showAnnouncement(announcement) method.

Example below will trigger the default welcome announcement:

window.Cello("showAnnouncement", { "type": "welcome-announcement-1" } )