jooba-fe-module - npm explorer

Welcome to the Jooba FE Module ##

Jooba is a full-featured jackpot management platform. You can learn more at https://jooba.tech.

$3

CDN
https://joobacdn.pages.dev/cdn/dist/jooba.min.js

NPM npm install --save jooba-fe-module

>Within your Front End, the Jooba SDK will look for a div with id jooba-container-root upon initialisation.
If not found, then the SDK will mount the widget from document.body or it can be used with the optional param root to define where to append the widget.

$3

jooba.init()

To display the jackpot widget you only need to call the function above with the required parameters as defined below:

Required Params:
1. brandId
2. eventId
3. playerId
4. applicationKey

Example:

``

js

jooba.init({

                brandId : 'yourbrand',

                eventId:'starburst_html5',

                playerId:'player1',

                applicationKey:'6106256daa52e22a2a0472017c6e6c70'

        })



>These required parameters except playerId will be provided via the Jooba back office. Speak to your Jackpot CRM or Jooba Account Manager for access.



>The

playerId

 parameter is any unique player data that has meaning within your systems. It can be an ID, an alias, an email address or similar.





Optional Params:  

1.

log

: boolean ==> display console.log on each action or event 

2.

root

: HTMLElement ==> the container that will append the jooba widget

3.

style

js

    {

         model: 1 || 2 || 3,

         src: 'string' // (custom css url) 

    }

     // see more about custom styles in the below section

5.

media

js

    { 

          key:'widget' ,

          type:'lottie'|| 'img',

          src: 'media URL'// (custom asset url) 

    }



> see more about lottie at: https://lottiefiles.com/



Extra Functions ##

Jooba provides extra functions to further customise your

widget interaction, based on events or not.







$3

Actions to call from your app. These calls can also be called from the widget by the user.





##### jooba.actions.optin() #####  

This function opts a player into the current jackpot.  

This is the same action when a user clicks to opt in within the widget.

js

jooba.actions.optin()

  



   

   

##### jooba.actions.optOut() #####  

This function opts a player out of the current jackpot.  

This is the same action when a user clicks to opt out within the widget

js

jooba.actions.optOut()

  



   

   

##### jooba.actions.betJackpot() #####  

This function can be used for every user bet/wager or any other event.

Params:  

1.

wager

 - the amount that the user bet/wager.

js

jooba.actions.betJackpot({wager:10})

  



   

   

##### jooba.actions.updateText() #####  

This function lets you change text and labels on the widget and related pages.  

Params:  

1.

key

 - the text id to change. See the list of keys bellow.  

2.

value

 - a string containing the new text to display (HTML tags not supported)

js

jooba.actions.updateText('optInButton','new opt in button text')



>This function should be used after

jooba.init()

 because some texts come from jackpot model and can be override your settings. 



List of keys: 



| Key                         | Default                                        |

| --------------------------- | ---------------------------------------------- |

| jackpotName                 | from jackpot model                         |

| optInButton                 | from jackpot model or 'Opt in Jackpot'     |

| optOutButton                | from jackpot model or 'Opt Out Jackpot'    |

| loading                     | 'Loading...'                                   |

| errorDefaultMessage         | 'Sorry,Something went wrong try again later.'  |

| userInLabel                 | 'You have joined the jackpot, good luck!'       |

| winMessage                  | 'CONGRATS! YOU WON THE JACKPOT!'               |

| closeWidgetConfirmMessage   | 'Are you sure?'                               |

| termsAndConditionsContent   | from jackpot model                         |

| termsPopupAcceptButtonLabel | 'To join to this jackpot just click bellow'    |

| termsPopupGetOutButtonLabel | 'To get out of this jackpot just click bellow' |



>Values from jackpot model come from Jackpot setup flow within the Jooba backoffice. Speak to your Jackpot CRM for more information.







#### Callbacks ####  

You can do actions based on jackpot events.

js

jooba.events.on()

  

Params:  

1.

key

 - the event id that you want listen for

2.

Function

 - a Function that will be called at the event moment and may or may not receive properties





Example

js

jooba.events.on('optin',({playerId})=>{

                console.log(

user ${playerId} has opted for jackpot

)

        })

  

Using this function will return

playerId

 and a console log a message.  

From this model you can customise for your needs.



See below the list of events with this feature and their return values.



List of keys: 



| Callback Key | Description                              | Returns                                                                  |

| ------------ | ---------------------------------------- | ------------------------------------------------------------------------ |

| optin        | return when user opts in for a jackpot    |

{playerId,eventId}:object

                                              |

| optOut       | return when user opts out of ajackpot    |

{playerId,eventId}:object

                                              |

| updateAmount | return when jackpot on widget is updated |

amount:number

                                                          |

| userWin      | return when user wins a jackpot          |

{amount, currency, playerId, operator, displayWinnerAnimation}:object

 |



> userWin, when you add a callback to this event we not display the winner animation per default,

> you can display a custom animation/message or if you want our default animation, call the displayWinnerAnimation provide at callback return 





Custom Widget Style ##



Jooba provides a complete API to customise the widget style. 



Set it up at

jooba.init() or with only the widget media at jooba.actions.updateWidgetMedia({key,type,src})







$3



For a complete widget style you should set it up at

jooba.init()

.

Choose a Jooba widget DOM model and add a custom style source url. 

Jooba provides three models of DOM structure. Check the below for an idea on which style you should use. 



>Attention: models only can be

1, 2 or 3

 and the CSS code should follow the example model.



CSS Example:

>URL's will be here







Code Example:

js

jooba.init({

                brandId : 'yourbrand',

                eventId:'starburst_html5',

                playerId:'player1',

                applicationKey:'6176156dea52f62a2a0472017c6e6c70',

                style:{

                          model:1, // 1, 2 or 3 

                          src:'{your-cdn-url}/style.css'

                      },

                media:{

                        key:'widget',

                        type:'lottie' || 'img', // lottie or img 

                         src:'{your-cdn-url}/animation.json' || '{your-cdn-url}/image.png'

                   }

        })



> see more about lottie at: https://lottiefiles.com/



Model 1 DOM structure:





Model 2 DOM structure:





Model 3 DOM structure:

Welcome to the Jooba FE Module ##

Jooba is a full-featured jackpot management platform. You can learn more at https://jooba.tech.

$3

js

jooba.init({

                brandId : 'yourbrand',

                eventId:'starburst_html5',

                playerId:'player1',

                applicationKey:'6106256daa52e22a2a0472017c6e6c70'

        })



>These required parameters except playerId will be provided via the Jooba back office. Speak to your Jackpot CRM or Jooba Account Manager for access.



>The

playerId

 parameter is any unique player data that has meaning within your systems. It can be an ID, an alias, an email address or similar.





Optional Params:  

1.

log

: boolean ==> display console.log on each action or event 

2.

root

: HTMLElement ==> the container that will append the jooba widget

3.

style

js

    {

         model: 1 || 2 || 3,

         src: 'string' // (custom css url) 

    }

     // see more about custom styles in the below section

5.

media

js

    { 

          key:'widget' ,

          type:'lottie'|| 'img',

          src: 'media URL'// (custom asset url) 

    }



> see more about lottie at: https://lottiefiles.com/



Extra Functions ##

Jooba provides extra functions to further customise your

widget interaction, based on events or not.







$3

Actions to call from your app. These calls can also be called from the widget by the user.





##### jooba.actions.optin() #####  

This function opts a player into the current jackpot.  

This is the same action when a user clicks to opt in within the widget.

js

jooba.actions.optin()

  



   

   

##### jooba.actions.optOut() #####  

This function opts a player out of the current jackpot.  

This is the same action when a user clicks to opt out within the widget

js

jooba.actions.optOut()

  



   

   

##### jooba.actions.betJackpot() #####  

This function can be used for every user bet/wager or any other event.

Params:  

1.

wager

 - the amount that the user bet/wager.

js

jooba.actions.betJackpot({wager:10})

  



   

   

##### jooba.actions.updateText() #####  

This function lets you change text and labels on the widget and related pages.  

Params:  

1.

key

 - the text id to change. See the list of keys bellow.  

2.

value

 - a string containing the new text to display (HTML tags not supported)

js

jooba.actions.updateText('optInButton','new opt in button text')



>This function should be used after

jooba.init()

 because some texts come from jackpot model and can be override your settings. 



List of keys: 



| Key                         | Default                                        |

| --------------------------- | ---------------------------------------------- |

| jackpotName                 | from jackpot model                         |

| optInButton                 | from jackpot model or 'Opt in Jackpot'     |

| optOutButton                | from jackpot model or 'Opt Out Jackpot'    |

| loading                     | 'Loading...'                                   |

| errorDefaultMessage         | 'Sorry,Something went wrong try again later.'  |

| userInLabel                 | 'You have joined the jackpot, good luck!'       |

| winMessage                  | 'CONGRATS! YOU WON THE JACKPOT!'               |

| closeWidgetConfirmMessage   | 'Are you sure?'                               |

| termsAndConditionsContent   | from jackpot model                         |

| termsPopupAcceptButtonLabel | 'To join to this jackpot just click bellow'    |

| termsPopupGetOutButtonLabel | 'To get out of this jackpot just click bellow' |



>Values from jackpot model come from Jackpot setup flow within the Jooba backoffice. Speak to your Jackpot CRM for more information.







#### Callbacks ####  

You can do actions based on jackpot events.

js

jooba.events.on()

  

Params:  

1.

key

 - the event id that you want listen for

2.

Function

 - a Function that will be called at the event moment and may or may not receive properties





Example

js

jooba.events.on('optin',({playerId})=>{

                console.log(

user ${playerId} has opted for jackpot

)

        })

  

Using this function will return

playerId

 and a console log a message.  

From this model you can customise for your needs.



See below the list of events with this feature and their return values.



List of keys: 



| Callback Key | Description                              | Returns                                                                  |

| ------------ | ---------------------------------------- | ------------------------------------------------------------------------ |

| optin        | return when user opts in for a jackpot    |

{playerId,eventId}:object

                                              |

| optOut       | return when user opts out of ajackpot    |

{playerId,eventId}:object

                                              |

| updateAmount | return when jackpot on widget is updated |

amount:number

                                                          |

| userWin      | return when user wins a jackpot          |

{amount, currency, playerId, operator, displayWinnerAnimation}:object

 |



> userWin, when you add a callback to this event we not display the winner animation per default,

> you can display a custom animation/message or if you want our default animation, call the displayWinnerAnimation provide at callback return 





Custom Widget Style ##



Jooba provides a complete API to customise the widget style. 



Set it up at

jooba.init() or with only the widget media at jooba.actions.updateWidgetMedia({key,type,src})







$3



For a complete widget style you should set it up at

jooba.init()

.

Choose a Jooba widget DOM model and add a custom style source url. 

Jooba provides three models of DOM structure. Check the below for an idea on which style you should use. 



>Attention: models only can be

1, 2 or 3

 and the CSS code should follow the example model.



CSS Example:

>URL's will be here







Code Example:

js

jooba.init({

                brandId : 'yourbrand',

                eventId:'starburst_html5',

                playerId:'player1',

                applicationKey:'6176156dea52f62a2a0472017c6e6c70',

                style:{

                          model:1, // 1, 2 or 3 

                          src:'{your-cdn-url}/style.css'

                      },

                media:{

                        key:'widget',

                        type:'lottie' || 'img', // lottie or img 

                         src:'{your-cdn-url}/animation.json' || '{your-cdn-url}/image.png'

                   }

        })



> see more about lottie at: https://lottiefiles.com/



Model 1 DOM structure:





Model 2 DOM structure:





Model 3 DOM structure: