cello.boot(options)
Initializes Cello Referral Component in your product.
Returns a promise that is resolved once the whole initialization process is finished or rejected if the boot command failed.
window . cello = window . cello || { cmd: [] };
window . cello . cmd . push ( async ( cello ) => {
try {
await cello . boot ( options );
} catch ( error ) {
// Handle the error appropriately
}
});
The solution above is designed so that you don’t have to wait for the library to finish loading before you call the command - follow it and use the window.cello
object to avoid that particular race condition.
For any other commands, or when you are sure that the command is called after the library has finished loading, you can opt to use the regular command syntax:
await window . Cello ( "boot" , options );
Accepts
The initialization options object: Identifier of the product your users will refer.
You can obtain this in your Cello Portal.
Product user details object. Required for select features Email of the product user. This data is used in the personalization of the referral
experience, e.g. email notifications. Required for select features
First name of the product user.
This data is used in the personalization of the referral experience, e.g. email notifications and the personalized message to referees .
Required for select features Last name of the product user
Full name of the product user.
Use this option if you do not have first name and last name separately.
Product user country, if known. ISO 3166 Alpha-2 standard e.g. DE
.
If the user is from an unsupported country , the Cello Referral Component will not be booted for this user and an error will be returned.
If no country is passed, Cello will still be booted. The language, in which the Referral Component will be loaded in ISO 639-1.
Default: undefined
. If undefined, we use default language set for your product.
Show or hide the Cello button, launching the Referral Component when it’s first initialized.
Default: false
Callback event for when Referral Component widget is opened.
Callback event for when Referral Component widget is closed.
Example
window . cello = window . cello || { cmd: [] };
window . cello . cmd . push ( async ( cello ) => {
try {
const options = {
productId: "REPLACE_WITH_PRODUCT_ID" ,
token: "REPLACE_WITH_TOKEN" ,
language: "en" ,
productUserDetails: {
firstName: "Bob" ,
lastName: "Bobsky" ,
fullName: "Bob B Bobsky" ,
email: "bob@gmail.com" ,
},
};
await cello . boot ( options );
// Call other Cello commands, if necessary
} catch ( error ) {
console . error ( "Failed to boot cello:" , error );
}
});
changeLanguage(language)
Changes the Referral Component language at runtime without re-initializing it.
window . Cello ( "changeLanguage" , "de" );
Accepts
The language string in ISO 639-1
close()
Closes Referral Component.
getActiveUcc()
Returns active ucc
and invite link
for the currently logged-in user.
const { ucc , link } = await window . Cello ( "getActiveUcc" );
Returns
The active ucc object: Active unique campaign code or referral code for the current logged-in user
Personal invite link for the current logged-in user
getCampaignConfig()
Returns campaign config values for the currently logged-in user.
const campaignConfig = await window . Cello ( "getCampaignConfig" );
Returns
The campaign config object: Percentage of attributed new revenue that will be paid as a reward
Maximum reward that can be earned per referral
Additional reward for signups to encourage more sharing
Additional reward for purchases to encourage more sharing
How long new users get a discount
newUserDiscountPercentage
The discount new users get
getLabels()
Returns select labels used in our Referral Component.
const labels = await window . Cello ( "getLabels" );
Returns
The labels object: A welcome text useful for building custom launchers
hide()
Hides the Cello button or bookmark that launches the Referral Component.
open(destination)
Opens Referral Component.
window . Cello ( "open" , destination );
Accepts
Optional destination string to open Referral Component on a specific tab or page:
"rewards"
- open Referral Component on the rewards tab
"edit-payments"
- open Referral Component on the payment details page
show()
Shows the Cello button or bookmark that launches the Referral Component.
showAnnouncement(announcement)
Triggers an announcement .
window . Cello ( "showAnnouncement" , announcement );
Accepts
Example
Example below triggers a default welcome announcement:
const announcement = { type: "welcome-announcement-1" };
window . Cello ( "showAnnouncement" , announcement );
shutdown()
Shuts down connection to Cello and unmounts the Referral Component.
window . Cello ( "shutdown" );
updateProductUserDetails(productUserDetails)
Updates user details at runtime without re-initializing the Referral Component.
window . Cello ( "updateProductUserDetails" , productUserDetails );
Accepts
The product user details object Email of the product user. This data is used in the personalization of the referral
experience, e.g. email notifications. Required for select features
First name of the product user.
This data is used in the personalization of the referral experience, e.g. email notifications and the personalized message to referees .
Required for select features Last name of the product user
Full name of the product user.
Use this option if you do not have first name and last name separately.
Example
const productUserDetails = {
email: "bob@gmail.com" ,
firstName: "Bob" ,
lastName: "Bobsky" ,
fullName: "Bob Bobsky" ,
};
window . Cello ( "updateProductUserDetails" , productUserDetails );