User Name:

Display name.

User ID:

Your system generated unique user id.

User Profile URL:

Profile picture url.(Optional)

Code Example

_CaptainUpWidget.login(userId, userName, userImage)

Code Example

const key = 'country';
const value = 'USA';
_CaptainUpWidget.setUserAttributes(key, value); // This function allows you to assign custom key-value pairs to a user's profile.

Parameters:

    
        Parameters
        type
        Description
    
    
        key
        string
        The key name for the user attribute.
    
    
        value
        string
        The value associated with the key.
    

Notes:
1. This function must be called before the user logs in.
2. To generate a signed user key, you need to add the relevant custom attributes.
3. These attributes will be visible in the Admin panel under the user profile -> User Attributes section.
4. To add multiple user attributes (key-value pairs), call the setUserAttributes function multiple times, each time with a different key and value.

Parameters	type	Description
key	string	The key name for the user attribute.
value	string	The value associated with the key.

Completed Image URL:

Use this image as overlay image

Completed Image Position:

Center

Bottom

Top

Code Example

_CaptainUpWidget.setCompletedURLWithPosition(completedImageUrl, 'center') // supported positions are 'center' 'top' and 'bottom'

Hide Completed Image Overlay

Code Example

_CaptainUpWidget.hideCompletedChallengeOverlay(true)

Please login into the admin area.
Open a Challenge and find Custom Data section.
Add below key.

Key	Value	Description
completed_behavior	hidden	Hide Completed Challenges

Please login into the admin area.
Open a Assets -> Shop Item and find Custom Data section.
Add below key.

Key	Value	Description
unsegmented_behavior	gray_out	Show Shop Item in Grayscale. Note: This shop item is not available for purchase.

Challenges Headline:

Challenges Sub Headline:

Code Example

_CaptainUpWidget.setChallengesHeadline('Headline')
_CaptainUpWidget.setChallengesSubHeadline('Sub Headline')

Levels Headline:

Levels Sub Headline:

Code Example

_CaptainUpWidget.setLevelHeadline('Headline')
_CaptainUpWidget.setLevelSubHeadline('Sub Headline')

Please login into the admin area.
Open a Challenge and find Custom Data section.
Add below keys.

Key	Value	Description
cta_title		Title of call to action button
cta_link		Link of call to action button
cta_title_[languages]		This key use for the language localization Accepted languages are: en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Example

Key	Value
cta_title	Visit
cta_link	https://captainup.com/
cta_title_gr	Επίσκεψη

Please login into the admin area.
Open a Challenge and find Custom Data section.
Add below keys.

Key	Value	Description
cta_title		Title of call to action button
cta_link		Link of call to action button
cta_title_[languages]		This key use for the language localization Accepted languages are: en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Example

Key	Value
cta_title	Visit
cta_link	https://captainup.com/
cta_title_gr	Επίσκεψη

Code Example

_CaptainUpWidget.pointsRequiredToReachNextLevel()

1. Get User Next-Level Details

Code Example

_CaptainUpWidget.userNextLevelDetails()

2. Get User Current-Level Details

Code Example

_CaptainUpWidget.userCurrentLevelDetails()

Fixed Avatar Image:

Code Example

_CaptainUpWidget.setFixAvatar(avatarUrl)

Background Image URL:

Use this image as shop "FEATURES ITEMS" background image

Code Example

_CaptainUpWidget.setFeaturedItemsBackgroundImage(url)

Enable Player Read Only

Code Example

_CaptainUpWidget.setPlayerReadOnly()

Enable Widget Default Settings

Code Example

_CaptainUpWidget.setDefaultThemeSetting()

Set the language selector in widget

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

const languages = 'en, fr, sp'
_CaptainUpWidget.showLanguageSelector(languages)

Please login into the admin area.
Open a Message and find Custom Data section.
Add below keys.

Key	Value	Description
header		Header of popup
hide_close	true	To hide the close button and header from message notification. Value must be 'true'.
cta_title		Title of call to action button
cta_link		link of call to action button

Modules:

Accepted values are challenges, shop, inbox, trophy, tournament, achievements

Code Example

_CaptainUpWidget.enableModules('challenges, shop, inbox, trophy, tournament, achievements')

Enable Free2Play Tab

Code Example

_CaptainUpWidget.enableFreeToPlayTab()

Enable Pick6 Wheel Tab

Code Example

_CaptainUpWidget.enableFreeToPlayPick6Tab()

Enable Pick6 Wheel Tab

Code Example

_CaptainUpWidget.enableFreeToPlayWheelTab()

Enable Pick6 Reel Tab

Code Example

_CaptainUpWidget.enableFreeToPlayReelTab()

Enable Can Smash Tab

Enable Emoji Blast Tab

Enable Tennis Tab

Code Example

_CaptainUpWidget.enableCanSmashCasualGame()
_CaptainUpWidget.enableEmojiBlastCasualGame()
_CaptainUpWidget.enableTennisCasualGame()

Enable Goal

Code Example

_CaptainUpWidget.enableGoal()

Code Example

_CaptainUpWidget.setCustomBanner(name, content, redirectUrl, displayOrder);

Parameters:

    
        Parameter
        Type
        Description
    
    
        name
        string
        The unique name of the banner.
    
    
        content
        string
        The text content of the banner.
    
    
        redirectUrl
        string (optional)
        The URL where users will be redirected when clicking the banner.
    
    
        displayOrder
        number (optional)
        The order in which banners should be displayed.
    

Notes:
1. The function ensures that banners are uniquely identified by their name.
2. If a banner with the same name exists, it is updated instead of creating a duplicate.
3. The banners are sorted based on their display order; undefined values are placed at the end.
4. Trimming is applied to avoid empty name and content values.
5. Call the function multiple times with different name, content, redirectUrl, and displayOrder values to add multiple banners.

Parameter	Type	Description
name	string	The unique name of the banner.
content	string	The text content of the banner.
redirectUrl	string (optional)	The URL where users will be redirected when clicking the banner.
displayOrder	number (optional)	The order in which banners should be displayed.

Code Example

_CaptainUpWidget.getCustomBanners(); // Returns an array of custom banners
 
Notes:
1. If there are no banners, an empty array is returned.
2. Each banner object contains `name`, `content`, `redirectUrl`, and `displayOrder`.
3. The banners are retrieved in their sorted display order.

Enable Autoplay

Autoplay Duration (optional)

Enter autoplay duration in milliseconds (ms)

Code Example

_CaptainUpWidget.setCustomBannerAutoPlay(autoplay, duration)

Parameters:

    
        Parameter
        Type
    
    
        autoplay
        boolean
    
    
        duration(milliseconds)
        number

Parameter	Type
autoplay	boolean
duration(milliseconds)	number

Custom Tab Name:

Custom Tab URL:

Custom Tab Svg Icon Code:

Iframe allowfullscreen Attribute:

Tab Size:

Fullscreen

Normal

Custom Tab Language:

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

_CaptainUpWidget.setCustomTab(customTabName, customTabURL, customTabLinkIconSvgCode, customTabAllowFullscreen, customTabTabSize, customTabLang)

Custom Tab 2 Name:

Custom Tab 2 URL:

Custom Tab Svg Icon Code:

Iframe allowfullscreen Attribute:

Tab Size:

Fullscreen

Normal

Custom Tab 2 Language:

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

_CaptainUpWidget.setCustomTab2(customTab2Name, customTab2URL, customTab2LinkIconSvgCode, customTab2AllowFullscreen, customTab2TabSize, customTab2Lang)

Custom Tab 3 Name:

Custom Tab 3 URL:

Custom Tab Svg Icon Code:

Iframe allowfullscreen Attribute:

Tab Size:

Fullscreen

Normal

Custom Tab 3 Language:

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

_CaptainUpWidget.setCustomTab3(customTab3Name, customTab3URL, customTab3LinkIconSvgCode, customTab3AllowFullscreen, customTab3TabSize, customTab3Lang)

Custom Tab 4 Name:

Custom Tab 4 URL:

Custom Tab Svg Icon Code:

Iframe allowfullscreen Attribute:

Tab Size:

Fullscreen

Normal

Custom Tab 4 Language:

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

_CaptainUpWidget.setCustomTab4(customTab4Name, customTab4URL, customTab4LinkIconSvgCode, customTab4AllowFullscreen, customTab4TabSize, customTab4Lang)

Custom Tab 5 Name:

Custom Tab 5 URL:

Custom Tab Svg Icon Code:

Iframe allowfullscreen Attribute:

Tab Size:

Fullscreen

Normal

Custom Tab 5 Language:

Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Code Example

_CaptainUpWidget.setCustomTab5(customTab5Name, customTab5URL, customTab5LinkIconSvgCode, customTab5AllowFullscreen, customTab5TabSize, customTab5Lang)

Code Example

const module = 'custom1';
const sandbox = 'allow-scripts allow-downloads'; // Sandbox attribute settings 
_CaptainUpWidget.setCustomTabSandbox(module, sandbox); 
// Assigns specific iframe sandbox attributes to the given module.

Parameters:

Parameters	type	Description
module	string	Specifies the target module for applying the sandbox attributes. Accepted values include: custom1, custom2, custom3, custom4, custom5, free2Play, free2Play_wheel, free2Play_reel, can_smash_casual_game, emoji_blast_game, tennis_casual_game
sandbox	string	Defines the sandbox restrictions for the iframe. This value determines which permissions are granted to content within the module. Common values include allow-scripts, allow-downloads, and other sandbox directives.

Custom HTML Tab Name:

Custom HTML Tab Content:

Custom HTML Tab Svg Icon Code:

Code Example

_CaptainUpWidget.setCustomHtmlTab(customTabHtmlName, customTabHtml, customTabHtmlIconSvgCode)

Custom HTML Tab 2 Name:

Custom HTML Tab 2 Content:

Custom HTML Tab 2 Svg Icon Code:

Code Example

_CaptainUpWidget.setCustomHtmlTab2(customTabHtml2Name, customTabHtml2, customTabHtml2IconSvgCode)

Custom HTML Tab 3 Name:

Custom HTML Tab 3 Content:

Custom HTML Tab 3 Svg Icon Code:

Code Example

_CaptainUpWidget.setCustomHtmlTab3(customTabHtml3Name, customTabHtml3, customTabHtml3IconSvgCode)

Custom HTML Tab 4 Name:

Custom HTML Tab 4 Content:

Custom HTML Tab 4 Svg Icon Code:

Code Example

_CaptainUpWidget.setCustomHtmlTab4(customTabHtml4Name, customTabHtml4, customTabHtml4IconSvgCode)

Custom HTML Tab 5 Name:

Custom HTML Tab 5 Content:

Custom HTML Tab 5 Svg Icon Code:

Code Example

_CaptainUpWidget.setCustomHtmlTab5(customTabHtml5Name, customTabHtml5, customTabHtml5IconSvgCode)

Info Content:

Code Example

_CaptainUpWidget.setInfoContent('inf content for info icon popup in profile section')

Should Show Info On First Visit

Code Example

_CaptainUpWidget.showInfoOnFirstVisit()

Please login into the admin area.
Open a Challenges / Shop / Trophy and find Custom Data section.
Add below keys.

Key	Description	Is Locale available
category	Category of item	Yes
ribbon_text	Ribbon text	Yes
ribbon_color	Ribbon background color
ribbon_text_color	Ribbon text color
overlay_image	Image path for make it overlay from main image

Note: for localization please add _{langue code} after the key. e.g. cta_title_fr

Please login into the admin area.
Open a Levels and Find Custom Data.
Add below keys.

Rules
1. Please input a numerical value for the "sub_level_count" key.
2. Sub-levels will only be displayed when the "sub_level_count" matches the number of "sub_level".
3. The "sub_level_[number]" key's value must follows the format "name | points | img_URL".
4. The aspect ratio for sub-level image should be 1:1.

Key	Value	Description	Is Locale available
sub_level_count	number	Number of sub level	No
sub_level_[level number]	name \| points \| img_URL	name: name of sub-levels. points: points required to reach that sub-level. img_URL: image link for the sub-level.	No

Example

Key	Value
sub_level_count	5
sub_level_1	Title 1 \| 500 \| https://i.ibb.co/xMfhkFs/image-1.png
sub_level_2	Title 2 \| 600 \| https://i.ibb.co/xMfhkFs/image-2.png
sub_level_3	Title 3 \| 700 \| https://i.ibb.co/xMfhkFs/image-3.png
sub_level_4	Title 4 \| 800 \| https://i.ibb.co/xMfhkFs/image-4.png
sub_level_5	Title 5 \| 900 \| https://i.ibb.co/xMfhkFs/image-5.png

Hide Sub Tier Text

Code Example

_CaptainUpWidget.setHideSubTierText()

Use Level Avatar For Profile Picture

Code Example

_CaptainUpWidget.useLevelAvatarForProfilePic()

Add the avatar url

Please login into the admin area.
Open a Levels and Find Custom Data.
Add below key.

Key	Value	Description	Is Locale available
avatar_url	URL	Image link for the avatar	No

Use Tier Avatar For Profile Picture

Code Example

_CaptainUpWidget.useTierAvatarForProfilePic()

Add the avatar url

Please login into the admin area.
Open a Tiers and Find Custom Data.
Add below key.

Key	Value	Description	Is Locale available
avatar_url	URL	Image link for the avatar	No

Use Level Name For User Name

Code Example

_CaptainUpWidget.useLevelUsername()

Add the username

Please login into the admin area.
Open a Levels and Find Custom Data.
Add below key.

Key	Value	Description	Is Locale available
username	Username	Username for the Profile	No

Use Sub Title from Level

Code Example

_CaptainUpWidget.useSubTitleOfLevel()

Add the sub title

Please login into the admin area.
Open a Levels and Find Custom Data.
Add below key.

Key	Value	Description	Is Locale available
sub_title	Sub Title	By default it will be like "3000 Points" if no data set	Yes

Hide Levels Points

Code Example

_CaptainUpWidget.hideLevelPoints()

Hide Out Of Stock Shop Items

Code Example

_CaptainUpWidget.hideOutOfStockShopItems()

Hide User Name

Code Example

_CaptainUpWidget.hideUsername()

Sort By Price Low To High in shop

Code Example

_CaptainUpWidget.sortByPriceLowToHigh()

Player Country Code:

Accepted Country Code Are ISO alpha-3
Example: USA, IND, GRC

Code Example

_CaptainUpWidget.setPlayerCountry("USA")

Hide Menubar Labels

Code Example

_CaptainUpWidget.hideMenubarLabels()

Hide Scroll Bar Instruction

Code Example

_CaptainUpWidget.hideScrollInstructionsInShopPage()

Disable Custom HTML Auto-Link Conversion

Code Example

_CaptainUpWidget.customHtmlDisableAutoConvertToLink()

Hide the Profile Picture

Code Example

_CaptainUpWidget.hideProfilePicture()

Enable Badge Progress Notification

Code Example

_CaptainUpWidget.enableBadgeProgressNotification()

Set Notification Visibility

accepted activities: achieve, level_up, currencies, tier_up, tier_down, tier_kept

Code Example

_CaptainUpWidget.disableNotifications('achieve, level_up')

Set Notification Duration

Please Enter The Notification Duration In Milliseconds(ms)

Code Example

_CaptainUpWidget.setNotificationDuration(1000)

Set Notification Position

Select the notification position

Code Example

_CaptainUpWidget.setNotificationPosition('top-right')

Hide Profile section

Code Example

_CaptainUpWidget.hideProfileSection()

Disable Shop Details

Disable Challenges Details

Code Example

_CaptainUpWidget.disableShopDetailsSection()
_CaptainUpWidget.disableChallengesDetailsSection()

Hide Widget Top Menu

Code Example

_CaptainUpWidget.hideMenu()

Display Reward Details Section

Code Example

_CaptainUpWidget.displayRewardDetailsOnChallenges()

Sort Badges by Progress High To Low

Code Example

_CaptainUpWidget.sortBadgesByProgressHighToLow()

Please login into the admin area.
Open a Badges or Assets -> shop item and find Custom Data section.
Add below keys.

Key	Value	Description
category_weight	number	Numbers are sorted in ascending order

Example

Key	Value
category_weight	1

Please login into the admin area.
Open a Badges or Currencies -> currency and find Custom Data section.
Add below keys.

Key	Value	Description
visibility	string	To hide a specific currency from the widget.
visibility_condition	string	To hide a specific currency for a particular country in the widget.

Example

Key	Value	Description
visibility	hidden
visibility_condition	user.cpt_country=GA,FR,CA	user -> user attribute cpt_country -> The key name of the user attribute that stores the user's country. GA,FR,CA -> The values for which the currency will be hidden in these countries

Disable Repeatable Badges Notification

Code Example

_CaptainUpWidget.disableNotificationForRepeatableBadges()

Challenges Card View

Code Example

_CaptainUpWidget.setChallengesCardView()

Enable Streak Progressbar:

Streak Progressbar URL:

Use this image as streak progressbar

Code Example

const enable = true
const url = '' // url is optional parameter and use for set the streak progressbar image
_CaptainUpWidget.enableStreakProgressBarForModular(enable, url)

Section Order:

Accepted values are challenges, shop, banners, free-game

Code Example

_CaptainUpWidget.setProfileTabDisplayOrder('challenges, shop, banners, free-game')

Header Fonts

Content Fonts

Other Fonts

Code Example

const theme = {
...
    fonts: {
        headerFontName: 'Roboto',
        contentFontName: 'Roboto Condensed',
        otherFontName: 'Roboto Condensed'
    }
...
}
_CaptainUpWidget.setTheme(theme)

Primary

Secondary

Body Background

Card Background

Card Menu Background

Menu Background

Progress Bar Background

Progress Bar Fill

Footer Background

Button

Button Text

Button Hover

Button Hover Text

Button Inactive

Button Inactive Text

Heading Text

Content Text

Footer Text

Currency Text

Selected Menu Text / Fullscreen Header Text

Selected Item Background

Information Popup Background

Backdrop Color

Backdrop Opacity

Set opacity between 0.6 to 0.9 for better user interface

Notification Popup Header Background

Notification Popup Header Text

Notification Popup Body Background

Notification Popup Body Text

Notification Popup Title Text

Notification Popup Close Icon

Notification Popup Button Background

Notification Popup Button Text

Notification Popup Button Hover Background

Notification Popup Button Hover Text

Current Level Shadow

Sidebar Border Color

Scroll Bar

Scroll Bar Background

Main Menu Text

Error Heading Text

Sidebar Border Width

Button Border Radius

Code Example

const theme = {
...
    colors: {
        primary: '#69a5ff',
        secondary: '#4f2a5f',
        bodyBackground: '#272d33',
        cardBackground: '#171b1f',
        cardMenuBackground: '#363a42',
        menuBackground: '#363a42',
        progressBarBackground: 'gray',
        progressBarFill: '#69a5ff',
        footerBackground: '#363a42',
        button: '#69a5ff',
        buttonHover: '#4f2a5f',
        buttonInactive: '#4f2a5f',
        buttonText: '#000000',
        buttonHoverText: '#ffffff',
        buttonInactiveText: '#ffffff',
        headingText: '#69a5ff',
        contentText: '#ffffff',
        footerText: '#ffffff',
        currencyText: '#69a5ff',
        selectedMenuText: '#69a5ff',
        selectedItemBackground: '#919191'
        informationPopupBackground: '#ffffff'
        backdropColor: '#000000',
        backdropOpacity: 0.4,
        notificationPopupHeaderBackground: '#363a42',
        notificationPopupHeaderText: '#FFFFFF',
        notificationPopupBodyBackground: '#272d33',
        notificationPopupBodyText: '#FFFFFF',
        notificationPopupTitleText: '#69a5ff',
        notificationPopupCloseIcon: '#69a5ff',
        notificationPopupButtonBackground: '#69a5ff',
        notificationPopupButtonText: '#ffffff',
        notificationPopupButtonHoverBackground: '#4f2a5f',
        notificationPopupButtonHoverText: '#ffffff',
        currentLevelShadow: '',
        sidebarBorderColor: '',
        sidebarBorderWidth: '',
        buttonBorderRadius: '50px',
        scrollBar: '#69a5ff',
        scrollBarBackground:'#808080',
        mainMenuText: '',
        errorHeadingText: '#FF0000',
         
    }
...
}
_CaptainUpWidget.setTheme(theme)

Secondary Button

Secondary Button Text

Secondary Button Hover

Secondary Button Hover Text

Code Example

const theme = {
...
    colors: {
        ...
        embed3 : {
            secondaryButtons: '#000000',
            secondaryButtonsText: '#00ffd1',
            secondaryButtonsHover: '#4e13d3'
            secondaryButtonsHoverText: '#ffffff'
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Condition Background

Condition Text

Condition Border

Completed Condition Background

Completed Condition Text

Completed Condition Border

Card Border

Code Example

const theme = {
...
    colors: {
        ...
        embed : {
            conditionBackground: '#ffffff',
            conditionText: '#000000',
            conditionBorder: '#f8ad1b',
            completedConditionBackground: '#669900',
            completedConditionText: '#ffffff',
            completedConditionBorder: '#f8ad1b',
            cardBorder: '#cacaca'
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Accent Button

Accent Button Text

Accent Button Hover

Accent ButtonHover Text

Accent Button Inactive

Accent Button Inactive Text

Challenges Card Background

Challenges Card Content Text

Menu Text

Main Heading Text

Secondary Button

Secondary Button Text

Secondary Button Hover

Secondary Button Hover Text

Secondary Button Inactive

Secondary Button Inactive Text

Code Example

const theme = {
...
    colors: {
        ...
        sideReveal : {
            accentButton: '#282828',
            accentButtonText: '#000000',
            accentButtonHover: '#f8ad1b',
            accentButtonHoverText: '#669900',
            accentButtonInactive: '#ffffff',
            accentButtonInactiveText: '#f8ad1b',
            challengesCardBackground: '#ffffff',
            challengesCardContentText: '#000000',
            menuText: '000000',
            mainHeadingText: '#cacaca',
            secondaryButton: '#ffffff',
            secondaryButtonText:'#000000',
            secondaryButtonHover:'#000000',
            secondaryButtonHoverText:'#ffffff',
            secondaryButtonInactive:'232323',
            secondaryButtonInactiveText:'528284',
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

SVG Icon Color

Box Shadow Color

Category Button Background

Category Button Text

Category Button Border

Category Active Button Background

Category Active Button Text

Level Card Background

Level Benefits Background

Level Benefits Text

Active Button Border

Border Color

Completed Progressbar Fill

Custom Button Background

Custom Button Text

Custom Button Hover

Custom Button Hover Text

Modal Button

Modal Button Text

Modal Button Hover

Modal Button Hover Text

Modal Content Text

Code Example

const theme = {
...
    colors: {
        ...
        OPAP: {
            svgIconColor:'#16BA3A',
            boxShadowColor: '#0000001F',
            categoryButtonBackground: '#9499a880',
            categoryButtonText: '#ffffff',
            categoryButtonBorder: '#696F81',
            categoryActiveButtonBackground: '#ffffff',
            categoryActiveButtonText: '#000000',
            levelCardBackground:"#1D1AB5",
            levelBenefitsBackground:"#ECEDF0",
            levelBenefitsText:"#000000",
            activeButtonBorder: "#FFA800",
            borderColor: "#3B3E49",
            completedProgressFill: "#16BA3A",
            customButtonBackground : "#ffffff",
            customButtonText: "#000000",
            customButtonHover: "#000000",
            customButtonHoverText: "#ffffff",
            modalButton: "#16BA3A",
            modalButtonText: "#000000",
            modalButtonHover: "#3EA6FF",
            modalButtonHoverText: "#000000",
            modalContentText: "#000000"
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Heading Text

Content Text

Currency Text

Progressbar Background

Progressbar Fill

Border Color

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_profile_widget: {
                profileBackground: '#F1F1F1',
                profileHeadingText: '#373737',
                profileContentText: '#373737',
                profileCurrencyText: '#373737',
                profileProgressBarBackground: '#D6D6D6',
                profileProgressBarFill: '#FDB640',
                profileBorderColor: '#E4E3E3'
            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Progressbar Background

Progressbar Fill

Border

Heading Text

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_level_widget: {
                levelBackground: '#F1F1F1',
                levelProgressBarBackground: '#D6D6D6',
                levelProgressBarFill: '#FDB640',
                levelBorderColor: '#E4E3E3',
                levelHeadingText: '#373737'
            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Card Background

Heading Text

Content Text

Progressbar Background

Progressbar Fill

Currency Text

Card Border

Button

Button Text

Button Hover

Button Hover Text

Details Backdrop Background

Backdrop Opacity

Challenges Scrollbar Track

Challenges Scrollbar Thumb

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_challenges_widget: {
                challengesBackground: '#F1F1F1',
                challengeCardBackground: '#FFFFFF',
                challengesHeadingText: '#373737',
                challengesContentText: '#373737A4',
                challengesProgressBarBackground: '#D6D6D6',
                challengesProgressBarFill: '#FDB640',
                challengesCurrency: '#373737',
                challengesCardBorder: '#E4E3E3',
                challengesButton: #000000,
                challengesButtonText: #ffffff,
                challengesButtonHover: #DCDBDB;
                challengesButtonHoverText: #000000
                challengesDetailsBackdrop: #000000
                challengesDetailsBackdropOpacity: '0.5'
                challengesScrollbarTrack: #f1f1f1
                challengesScrollbarThumb: #c1c1c1
            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Card Background

Heading Text

Content Text

Currency Text

Card Border

Button

Button Text

Button Hover

Button Hover Text

Button Disable

Button Disable Text

Backdrop Color

Backdrop Opacity

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_shop_widget: {
                shopBackground: '#F1F1F1',
                shopCardBackground: '#FFFFFF',
                shopHeadingText: '#373737',
                shopContentText: '#373737A4',
                shopCurrency: '#373737',
                shopCardBorder: '#E4E3E3',
                shopButton: '#000000',
                shopButtonText: '#ffffff',
                shopButtonHover: '#000000',
                shopButtonHoverText: '#000000',
                shopButtonDisable: '#DCD8D8',
                shopButtonDisableText: '#261E1E',
                modalBackdropColor: '#000000',
                modalBackdropOpacity: '0.5'

            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Heading Text

Content Text

Badge

Badge Text

Border

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_inbox_widget: {
                inboxBackground: '#F1F1F1',
                inboxHeadingText: '#373737',
                inboxText: '#373737A4',
                inboxBadge: '#000000',
                inboxBadgeText: '#ffffff',
                inboxBorderColor: '#E4E3E3'
            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Background

Heading Text

Content Text

Board Background

Board Text

Active Text

Upcoming Text

Inactive Text

Border Color

Button

Button Text

Button Hover

Button Hover Text

Button Disable

Button Disable Text

Scrollbar

Scrollbar Background

Code Example

const theme = {
...
    colors: {
        ...
        inlineWidget : {
            ...
            _cpt_tournament_widget: {
                tournamentBackground: #F1F1F1,
                tournamentHeadingText: #373737,
                tournamentContentText: #373737A4,
                tournamentBoardBackground: #FFFFFF,
                tournamentBoardText: #373737A4,
                tournamentActiveText: #29AA00,
                tournamentUpcomingText: #06819B,
                tournamentInactiveText: #DC3545,
                tournamentBorderColor: #E4E3E3,
                tournamentButton: #000000,
                tournamentButtonText: #FFFFFF,
                tournamentButtonHover: #DCDBDB,
                tournamentButtonHoverText: #000000,
                tournamentButtonDisable: #EEEEEE,
                tournamentButtonDisableText: #919393,
                tournamentTableTab: #DCDBDB,
                tournamentFirstRank: #FFEFB3,
                tournamentSecondRank: #F1F1F1,
                tournamentThirdRank: #ECD8D8,
                tournamentScrollbar: #ffa500,
                tournamentScrollbarBackground: #808080
            }
            ...
        }
        ...
    }
...
}
_CaptainUpWidget.setTheme(theme)

Widget Top Spacing Desktop

Widget Top Spacing Mobile

Please put value in (px) e.g. 100px

Code Example

const theme = {
...
widgetTopSpacing: {
    widgetTopSpacingDesktop: "0px",
    widgetTopSpacingMobile: "0px"
}
...
}
_CaptainUpWidget.setTheme(theme)

Profile:

put the css gradient value e.g. radial-gradient(circle, rgb(110 18 129) 0%, rgb(17 5 65) 90%)

Challenges:

put the css gradient value e.g. radial-gradient(circle, rgb(110 18 129) 0%, rgb(17 5 65) 90%)

Progress Bar:

put the css gradient value e.g. linear-gradient(to right, rgb(244 190 255) 0%, rgb(122 98 255) 90% 100%)

Challenges Progress Bar:

put the css gradient value e.g. linear-gradient(to right, #e5405e 0%, #ffdb3a 45%, #3fffa2 100%)

Challenges Completed Progress Bar:

put the css gradient value e.g. linear-gradient(to right, #6a11cb 0%, #2575fc 45%, #00c6ff 100%);

Button Background:

- This feature is only applicable for Theme 5
put the css gradient value e.g. linear-gradient(180deg, #7BDBDF 0%, #028F91 100%)

Button Background Hover:

- This feature is only applicable for Theme 5
put the css gradient value e.g. linear-gradient( #93e6e9 0%, #93e6e9 100%)

Button Background Disabled:

- This feature is only applicable for Theme 5
put the css gradient value e.g. linear-gradient(#444444 0%, #444444 100%)

Shop Hover Background:

- This feature is only applicable for Embed 2 Theme
put the css gradient value e.g. linear-gradient(135deg,#1a0533,#33083f 36%,#53034b 53%,#750052 65%,#990054 75%,#b80050 83%,#d10046 92%,#eb1e36)

Scroll Bar:

- This feature is only applicable for Embed 2 Theme
put the css gradient value e.g. linear-gradient(0deg, rgb(234, 102, 24), rgb(154, 1, 182))

Mid View Currency Gradient:

- This feature is only applicable for Popup theme Mid view
put the css gradient value e.g. linear-gradient(180deg, #823d9b -4%, #130f21 45%, #7146ab 50%)

Card Background Gradient:

- This feature is only applicable for Embed 3 Theme
put the css gradient value e.g. linear-gradient(295deg, rgba(0,0,0,1) 58%, rgba(0,132,108,1) 100%);

Border Gradient Color:

- This feature is only applicable for Embed 3 Theme
put the css gradient value e.g. linear-gradient(to bottom, transparent, #808080);

Border Gradient Colors:

put the css gradient value e.g. linear-gradient(117.86deg, rgba(124, 119, 119, 0.196) 23.38%, rgba(28, 32, 38, 0.064) 100%);

Card Gradient Colors:

put the css gradient value e.g. linear-gradient(117.86deg, rgba(124, 119, 119, 0.196) 23.38%, rgba(28, 32, 38, 0.064) 100%);

Code Example

const theme = {
...
    gradientBackgroundColors: {
        profileBackgroundGradient: 'radial-gradient(circle, rgb(110 18 129) 0%, rgb(17 5 65) 90%)',
        challengesBackgroundGradient: 'radial-gradient(circle, rgb(110 18 129) 0%, rgb(17 5 65) 90%)'
        progressBarGradient: 'linear-gradient(to right, rgb(244 190 255) 0%, rgb(122 98 255) 90% 100%)'
        challengesProgressBarGradient: 'linear-gradient(to right, #e5405e 0%, #ffdb3a 45%, #3fffa2 100%)'
        challengesCompletedProgressBarGradient: 'linear-gradient(to right, #e5405e 0%, #ffdb3a 45%, #3fffa2 100%)'
        buttonBackgroundGradient: 'linear-gradient(180deg, #7BDBDF 0%, #028F91 100%)',
        buttonBackgroundGradientHover: 'linear-gradient( #93e6e9 0%, #93e6e9 100%)',
        buttonBackgroundGradientDisabled: 'linear-gradient(#444444 0%, #444444 100%)',
        shopHoverBackgroundGradient: 'linear-gradient(135deg,#1a0533,#33083f 36%,#53034b 53%,#750052 65%,#990054 75%,#b80050 83%,#d10046 92%,#eb1e36)',
        scrollBarGradient: 'linear-gradient(0deg, rgb(234, 102, 24), rgb(154, 1, 182))',
        midViewCurrencyGradient: 'linear-gradient(180deg, #823d9b -4%, #130f21 45%, #7146ab 50%)'
        cardBackgroundGradient: 'linear-gradient(295deg, rgba(0,0,0,1) 58%, rgba(0,132,108,1) 100%)'
        borderGradientColor: 'linear-gradient(to bottom, transparent, #808080)'
        borderGradientColors: 'linear-gradient(117.86deg, rgba(124, 119, 119, 0.196) 23.38%, rgba(28, 32, 38, 0.064) 100%)'
        cardGradientColors: 'linear-gradient(118.26deg, rgba(143, 146, 149, 0.16) 23.84%, rgba(73, 80, 87, 0.16) 100.29%)'
    }
...
}
_CaptainUpWidget.setTheme(theme)

Desktop:

Mobile:

Mid View:

Mid View Profile:

Code Example

const theme = {
...
    bodyBackgroundImage: {
        desktop: '',
        mobile: '',
        midView:'',
        midViewProfile:'',
    }
...
}
_CaptainUpWidget.setTheme(theme)

Disable Unreached Levels Grayscale

Code Example

_CaptainUpWidget.disableLevelsGrayscale(true)

Header Letter Spacing

Content Letter Spacing

Code Example

const theme = {
...
    fonts: {
        headerLetterSpacing: '2px',
        contentLetterSpacing: '2px'
    }
...
}
_CaptainUpWidget.setTheme(theme)

Code Example

const module = 'profile';
const iconURL = ''; // add you svg link
_CaptainUpWidget.setMenuIcon(module, iconURL); // This function allows you to set custom header icons.

Parameters:

    
        Parameters
        type
        Description
    
    
        module
        string
        The module name for set the individual module icon.
The accepted values was: profile, challenges, shop, inbox, tournament, trophy
    
    
        iconURL
        string
        The iconURL associated with the module.
Upload your svg icon on server/public folder and set that .svg file 
        
    

Notes:
1. This feature works exclusively with the "Side Reveal" theme/layout.
2. To assign multiple module icons (key-value pairs), invoke the setMenuIcon function repeatedly.

Parameters	type	Description
module	string	The module name for set the individual module icon. The accepted values was: profile, challenges, shop, inbox, tournament, trophy
iconURL	string	The iconURL associated with the module. Upload your svg icon on server/public folder and set that .svg file

Layout:

Popup

Side Reveal

Fullscreen

Sidebar

Website

Embed 2

Popup 2

Code Example

const theme = {
...
    layout: 'popup'
...
}
_CaptainUpWidget.setTheme(theme)

Inline Widget Section

Profile Section

Level Section

Inbox Section

Challenges Section

Shop Section

Shop Carousel Section

Tournament Section

Set Levels No Of Lines For Title

Please put value Between 1 to 4

Set Levels No Of Line For Description

Please put value Between 1 to 8

Code Example

CaptainUpWidget.setLevelsNoOfLines(titleNoOfLines, descriptionNoOfLines);

Set Challenges No Of Lines For Title

Please put value Between 1 to 4

Set Challenges No Of Line For Description

Please put value Between 1 to 8

Code Example

_CaptainUpWidget.setChallengesNoOfLines(titleNoOfLines, descriptionNoOfLines);

Set Shop No Of Lines For Title

Please put value Between 1 to 4

Set Shop No Of Line For Description

Please put value Between 1 to 8

Code Example

_CaptainUpWidget.setShopNoOfLines(titleNoOfLines, descriptionNoOfLines);

Enter the Number Next Level Visible

Code Example

Note: Passed argument must be the number.

_CaptainUpWidget.makeNextNLevelVisible(3)

Challenges Layout:

Carousel

Column

Code Example

_CaptainUpWidget.setChallengesLayout('carousel')

Reward Layout:

List

Carousel

Code Example

_CaptainUpWidget.setRewardLayout('carousel')

On Desktop

On Mobile

Code Example

_CaptainUpWidget.hideCloseIconOnMobile()
_CaptainUpWidget.hideCloseIconOnDesktop()

Popup Size For Desktop:

Normal

Large

Popup Size For Mobile:

Normal

Large

Code Example

_CaptainUpWidget.setPopupSizeMobile('large')
_CaptainUpWidget.setPopupSizeDesktop('large')
_CaptainUpWidget.setPopupSize('large') // set for mobile and desktop
_CaptainUpWidget.setPopupSize('normal') // set for mobile and desktop

Level Listing Strategy:

Current Level

First Level

Code Example

_CaptainUpWidget.setLevelListingStrategy('current_level')
_CaptainUpWidget.setLevelListingStrategy('first_level')

Hide Reward Button

Code Example

_CaptainUpWidget.hideRewardButton()

Hide On Desktop

Hide On Mobile

Code Example

_CaptainUpWidget.hideDotsInLevel(hideOnDesktop, hideOnMobile)

Hide On Desktop

Hide On Mobile

Code Example

_CaptainUpWidget.hideDotsInChallenges(hideOnDesktop, hideOnMobile)

Disable Loop For Levels

Code Example

_CaptainUpWidget.disableLoopForLevels()

Display Hidden Badges Notification

Code Example

_CaptainUpWidget.setDisplayNotificationsOfHiddenBadges()

Display Badge Completed Count

Code Example

_CaptainUpWidget.setDisplayBadgeCompletedCount()

Display Relative Points

Code Example

_CaptainUpWidget.setRelativePoints()

Display Tiers

Code Example

_CaptainUpWidget.displayTiers()

Hide Footer Section

Code Example

_CaptainUpWidget.hideFooter()

Show Categories Icon

All Category Icon:

Please enter the icon url

Code Example

_CaptainUpWidget.enableCategoryIcon()

 allCategoryIconURL = "" // This URL is use for the "All" titled category for the badges and assets shop items
_CaptainUpWidget.setAllCategoryIconURL(allCategoryIconURL)

Add the Category Icon

Please login into the admin area.
Open a Badges or Assets shop items and Find Custom Data.
Add below key.

Key	Value	Description
category_icon_url	URL	Image link for the category icon

Show Level Bullet Point

Code Example

_CaptainUpWidget.enableLevelBulletPoints()

Add the Bullet points

Please login into the admin area.
Open a Levels and Find Custom Data.
Add below key.

Rules
1. Input string values for the keys following the pattern "bullet_title_[number]"
2. The order of the bullet points will correspond to the numbers in the keys.

Note: If the level bullet points are not set, the level description will be displayed.

Key	Value	Description	Is Locale available
bullet_title_[point number]	string	Add the description	No
bullet_title_[point number]_[language]	string	Add the language code Accepted values are en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he	No

Example

Key	Value
bullet_title_1	Free Spins every month
bullet_title_2	Birthday Bonus to celebrate your special day
bullet_title_3	Access to special tournaments and missions
bullet_title_1_fr	Tours gratuits chaque mois

Modules:

Profile

Challenges

Shop

Inbox

Position:

Top

Bottom

Custom HTML:

Code Example

const module = 'profile';
const position = 'top';
const html = 'HTML code' // put your html code here as a string
_CaptainUpWidget.setPopup2CustomHtml(module, position, html);

Mid View Visibility

Code Example

_CaptainUpWidget.enableMidView()

Widget Border Radius

Add value in px

Code Example

_CaptainUpWidget.setWidgetBorderRadius('20px')

Hide Sidebar

Code Example

_CaptainUpWidget.setSideBarHidden()

Sidebar Vertical Position

Please put value between 20 to 80 for better user interface(we are using VH)

Code Example

// provide the vh. dimension without vh like "30"
const vh = "50"
_CaptainUpWidget.setSideBarPositionVertical(vh)

Hide Progressbar at Sidebar

Code Example

_CaptainUpWidget.hideProgressBarAtSideBar()

Hide Maximized SideBar

Code Example

_CaptainUpWidget.hideMaximizedSideBar()

Show Sidebar Border

Code Example

_CaptainUpWidget.setBorderSideBar(true)

Show Square Sidebar

Code Example

_CaptainUpWidget.showSquareSidebar()

On Desktop

On Mobile

Code Example

_CaptainUpWidget.openPopupByDefaultOnDesktop()
_CaptainUpWidget.openPopupByDefaultOnMobile()

Disable scrollbar when popup is open

Code Example

_CaptainUpWidget.disableWebsiteScroll()

Set Notifications Show On Focus

Code Example

_CaptainUpWidget.setNotificationsShowOnFocus()

Checked for close on backdrop click

Code Example

_CaptainUpWidget.closeWidgetOnBackdropClick(false)

Code Example

_CaptainUpWidget.open()
_CaptainUpWidget.open('challenges')
_CaptainUpWidget.open('shop')
_CaptainUpWidget.open('inbox')
_CaptainUpWidget.open('tournament')
_CaptainUpWidget.open('trophy')

Note: Please wait for 1-2 min to get notification popup

Demo Background Image URL:

Desktop:

Mobile:

Logout with Reload Logout without Reload

Code Example

_CaptainUpWidget.logout() // logout with reload
_CaptainUpWidget.logout(false) // logout without reload

Please login into the admin area.
Open a Badges and find Custom Data section.
Add below key.

Key	Value	Description
identifier	string	Set the identifier to display the corresponding badges.

Example

Key	Value
identifier	real_jackpot

Code Example

Put below code in the body tag 

<div class="_captain_up_badges" identifier='real_jackpot' items-to-show='2'></div>
<div class="_captain_up_badges" identifier='exclusive' items-to-show='2'></div>

identifier:Set the value to match the identifier name under badges->Custom Data.
items-to-show:Specify the number of items to display on the slider.

Please login into the admin area.
Open a Assets -> Shop Item and find Custom Data section.
Add below key.

Key	Description
post_purchase_message	Display message on the asset successfully purchase
post_purchase_message_[languages]	This key use for the language localization Accepted languages are: en, sp, pt, fr, gr, ru, it, de, tr, cy_sr, lt_sr, sk, th, ar_sa, ja, sw, he

Example

Key	Value
post_purchase_message	You will receive your tickets to your email within 24 hours. Please contact {asset_name} for any inquiries. Note: If you want to show the asset name into the string then add the {asset_name} into the string.
post_purchase_message_gr	Θα λάβετε τα εισιτήριά σας στο email σας εντός 24 ωρών. Επικοινωνήστε με το X για οποιαδήποτε απορία.

Please login into the admin area.
Open a Assets -> Shop Item and find Custom Data section.
Add below key.

Key	Description
buy_button_label	Label for the buy button on shop section
buy_button_label_[languages]	This key use for the language localization Accepted languages are: en, sp, pt, fr, gr, ru, it, de, tr, cy-sr, lt-sr, sk, th, ar-sa, ja, sw, he

Example

Key	Value
buy_button_label	Vote
buy_button_label_gr	Ψήφος

Note:
1. Replace only predefined words.

Code Example

const langOverWriteEN = {
    challenges: 'Missions',
    shop: 'Rewards',
    trophies: 'Prizes',
    areYouSure: 'Are you sure you want to redeem your points for {name} ? You will not be able to retrieve your points after exchanging them.',
    bonusAlreadyAssigned: 'Player can have only one active bonus. In order to receive a new bonus, your active bonus must be completed or closed.'
}
const langOverWriteGR = {
    trophies: 'Έπαθλα',
    youHave: 'Έχεις ',
    bonusAlreadyAssigned: 'Οι εγγεγραμμένοι παίκτες μπορούν να έχουν μόνο ένα ενεργό μπόνους κάθε φορά. Για την απόκτηση κάποιου άλλου μπόνους, θα πρέπει αρχικά το ενεργό μπόνους να έχει εκπληρωθεί ή να έχει κλείσει.'
}
_CaptainUpWidget.setLanguageOverwrite('en', langOverWriteEN)
_CaptainUpWidget.setLanguageOverwrite('gr', langOverWriteGR)

Note:
1. Please return null if you need to ignore that notification.

Code Example

_CaptainUpWidget.beforeDisplayNotification((type, language, entity, text) => {  
    // add the conditions as per requirement
    if(type == 'achieve' && language == 'el-gr') {   
        return 'Μόλις κέρδισες πόντους & PS Coins στο PS Rewards'; // return the modified notification text
    }
    return text;  // for other notifications show as accepted please put this return value
})

Parameter	Data Type	Possible Values
type	string	achieve, level_up, currencies, tier_up, tier_down, tier_kept
language	string	'en-us', 'fr-fr', 'de-de', 'el-gr', etc.
entity	Object	{ active: true, name: 'XXX', ...badgeOtherDetails }
text	string	You achieved X badge

Code Example

_CaptainUpWidget.shouldAutoCloseNotification((type, language, entity, shouldAutoclose) => {  
    // add the conditions as per requirement
    if(type == 'achieve') {
        // true = notification auto close true
        // false = notification auto close false (need to close the notification)
        return false; // return the true or false
    }
    return shouldAutoclose;  // for other notifications show as accepted please put this return value
})

Parameter	Data Type	Possible Values
type	string	achieve, level_up, currencies, tier_up, tier_down, tier_kept
language	string	'en-us', 'fr-fr', 'de-de', 'el-gr', etc.
entity	Object	{ active: true, name: 'XXX', ...badgeOtherDetails }
shouldAutoclose	boolean	true or false

Notes:
1. Set dynamic options/data to be pass while purchasing shop item
2. Object Keys must be string

Code Example

 const dynamic_options_for_reward = {
    ...
    "name": "override value",
    ...
}
_CaptainUpWidget.setDynamicOptionsForRewards(dynamic_options_for_reward)

It will allow to subscribe to events

Code Example

_CaptainUpWidget.subscribe((type, entity) => { 
    // add the conditions as per requirement
})

Parameter	Data Type	Possible Values
type	string	currencies, inbox, badges, activities, levels, assets, tournaments
entity	any	{ active: true, name: 'XXX', ...otherDetails } or const entity = { active: true, name: 'XXX', ...otherDetails } [ entity, entity ]

Get user interaction activities

Code Example

_CaptainUpWidget.onUserInteraction((action, data) => { 
    // add the conditions as per requirement
})

Parameter	Data Type	Possible Values
action	string	open_widget, close_widget, visit_profile_page, visit_reward_page, visit_challenges_page, visit_shop_page, visit_tournament_page, visit_trophy_page, visit_inbox_page, visit_custom_link_tab, visit_custom_html_tab, visit_custom_html_tab_2, visit_free2play_tab, visit_single_challenge, visit_single_shop_item, visit_single_tournament, read_inbox_item, click_on_category_of_challenges, click_on_category_of_shop, click_on_category_of_tournament, claim_reward_manually, click_on_challenges_CTA, click_on_messages_CTA, acquire_shop_item, join_tournament, shop_item_click_buy, shop_item_click_confirm, shop_item_click_cancel
data	object	const data = { active: true, name: 'XXX', ...otherDetails } or const data = {}

Get logged in user data

Code Example

_CaptainUpWidget.getUser((userInfo) => { 
    // logged in user info 
})

Code Example

_CaptainUpWidget.getLevels((levels) => { 
    // all the level info 
})

Code Example

const allBadges = _CaptainUpWidget.getAllBadges()

Code Example

const allAssets = _CaptainUpWidget.getAllAssets()

Code Example

const allLevels = _CaptainUpWidget.getAllLevels()

Code Example

const allTiers = _CaptainUpWidget.getAllTiers()

Code Example

_CaptainUpWidget.afterLogin(() => {
    // Add your code here to execute after a successful login.
})

Code Example

const userData = _CaptainUpWidget.getUserData()

Code Example

window._CaptainUpWidget.onLanguageSelection((language) => {
    // to get the widget language
})

Integration

Import the custom fonts in the head tag.

Put below code in the body tag

                <div id="_captain_up"></div>
                <script src="https://captainup.com/assets/sdk.js"></script>
                <script src="https://captainup.com/assets/widget.js"></script>

Put below code before end of body tag

Copy Demo Url Matrix Vivid

Authentication

CSS Libraries

User Journey

User Sign In Option

User Sign In Option

Code Example

User Custom Attributes Instruction

User Custom Attributes Instruction

Code Example

Challenge Completion Overlay Graphics

Challenge Completion Overlay Graphics

Code Example

Completed Image Overlay Visibility

Completed Image Overlay Visibility

Code Example

Challenges Completed Behavior

Challenges Completed Behavior

Shop grayed out unsegmented items

Shop grayed out unsegmented items

Global Challenge Title & Summary

Global Challenge Title & Summary

Code Example

Global Level Title & Summary

Global Level Title & Summary

Code Example

Challenge-Specific Call-to-Action

Challenge-Specific Call-to-Action

Shop-Specific Call-to-Action

Shop-Specific Call-to-Action

Next-Level Custom Points Indicator

Next-Level Custom Points Indicator

Code Example

Get User Current and Next Level Details

Get User Current and Next Level Details

Code Example

Code Example

Use provided image as avatar for all Users

Use provided image as avatar for all Users

Code Example

Shop Features Items Graphics

Shop Features Items Graphics

Code Example

Enable Read only

Enable Read only

Code Example

Enable Widget Default Settings

Enable Widget Default Settings

Code Example

Language & Messaging

Default Language

Default Language

Code Example

Language Picker Toggle

Language Picker Toggle

Code Example

Customizable Alert Messages

Customizable Alert Messages

Advanced Functionality

Tab Visibility Control

Tab Visibility Control

Code Example

Free2Play Tab Visibility Control

Free2Play Tab Visibility Control

Code Example

Pick6 Tab Visibility Control

Pick6 Tab Visibility Control

Code Example

Pick6 Wheel Tab Visibility Control

Pick6 Wheel Tab Visibility Control

Code Example

Pick6 Reel Tab Visibility Control

Pick6 Reel Tab Visibility Control

Code Example

Casual Game Tab Visibility Control

Casual Game Tab Visibility Control

Code Example

Goal Visibility Control

Goal Visibility Control

Code Example

Set Custom Banners