Cello Custom Launcher

If you would like to allow your users to open the Cello sharing experience from multiple places in your product, you can create a custom launcher for the Cello Referral Component.

The Cello custom launcher allows you to open the Cello 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 that should launch Cello Referral Component. It can be a button, a menu item, a link.
2. Make sure your element has a unique identifier in your application DOM. It can be a class ID, an attribute selector, an element ID. Add the ID or class to the HTML element where you want the Cello 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 the cello.js. Text will be localized to the referrers language and reward amount is based on the referrers campaign.

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

const myCustomLauncherLabel = labels.customLauncher

Disable Cello button

Cello button is a Floating action button or Bookmark provided as a default Cello 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".

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 a client-side JS method. Example below will trigger the default welcome announcement:

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

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 - Default behaviour

<ul>

  <li cello>"Invite"</li>

</ul>

• Selector is non-clickable (won't open the Cello Referral Component), but shows notifications badge - 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 which launches the Cello 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 Cello Referral Component

<ul>

  <li cello data-cello-badge="false">

    "Invite"

  </li>

</ul>