Skip to main content

​
Requirements

1

Create App ID on Dashboard

If you haven’t done this yet, log in to your dashboard and create your app ID first.
Important: IDs must comply with LG naming guidelines
  • Avoid numbers in the bundle ID
  • Incorrect: com.game6.nice
  • Correct: com.gamesix.nice
2

Extract SDK Framework

Download the latest Bright SDK from the Bright SDK Dashboard, unzip it.
  1. SDK Structure:
├── sample_app
├── iframe_sample_app
└── sdk
    ├── consent
    │   └── brd_api.js
    └── service
        ├── peer_node
        ├── util
        ├── index.js
        ├── package.json
        └── services.json
  1. SDK Overview:
    • sample_app - A standard webOS app architecture example. Can also be used as a reference for Hosted Web Apps.
    • iframe_sample_app - Example for apps where the UI is rendered inside an iFrame.
    • SDK Integration Components:
      1. service directory - The main engine containing all logic required to run the SDK. Must be copied next to your other services.
      2. brd_api.js - Frontend interface implementing the consent screen. Must be integrated with your application’s frontend.
      See the sequence diagram for integrating the most common case.
3

Integrate Bright SDK in Your Code

You must update IDs in the SDK config files to match your application.
  1. Configure app/service identifiers:
    • Update package.json
      • Set a correct name attribute.
      • Keep the .brd_sdk postfix.
      • Leave the rest untouched.
    • Update services.json
      • Set id, services[0].id, and services[0].name.
      • Keep the .brd_sdk postfix
      • Leave the rest untouched
    • Example Configuration Given appID from dashboard: webos_com.example.app.
      • appinfo.json ID should be: com.example.app.
      • package.json + services.json ID must be: com.example.app.brd_sdk
      The SDK will add the webos_prefix automatically.
  2. Embed SDK Dialog in Your Code: You can use sample_app as a reference.
    • Import brd_api.js:
      • Copy brd_api.js and webOSTV.js into your app directory.
      • Import it from the main file responsible for app initialization.
      • After brd_api.js execution, the brd_api global object will be available.
    <!DOCTYPE html>
<html>
  <head>
    <script src="webOSTV.js"></script>
    <script src="brd_api.js"></script>
  </head>
  <body></body>
</html>
    • SDK embedding in case of iFrame: If your app is rendered in an iFrame:
      • brd_api.js must be included in the HTML page that is located on your server.
      • Add brd_iframe.js on the *.ipk side iframe_sample_app/lib/brd_iframe.js).
      • Set iframe: true in api_settings. The location of SDK components is presented in the table below.
        TV (*.ipk)Server (iframe src)
        webOSTV.jsbrd_api.js
        brd_iframe.js
        service (folder)
  3. Add SDK Initialization: Call brd_api.init() after page load to access all SDK methods. Example: 
    <!DOCTYPE html>

<html>
  <head>
...
    <script>
      window.onload = function(){
  var api_settings = {
    app_name: 'BrightData WebOS Sample',
          app_logo: 'icon_130.png',
        };
        try {
    brd_api.init(api_settings, {
            on_failure: function(message){
              console.log('init failure. Error: ', message);
            },
            on_success: function(){ console.log('init success'); },
          });
        } catch(e){
          console.error(e); 
        }
      };
    </script>
...
  </head>
  <body>
...
  </body>
</html>
Consent behavior:
  • On first call brd_api.init() will show a consent screen.
  • The user must agree or disagree.
  • Get the result by setting the on_status_change callback.
  • The consent screen handles TV remote control input.
  • You must disable your remote input processing when the consent screen is shown.
  • on_status_change will be called after the consent screen is closed.
4

Add Opt-In/Out Settings Option

SHARED CONTENT - will add
5

Custom Consent Screen (optional)

SHARED CONTENT - will add
6

App Performance

SHARED CONTENT - will add
7

Build Your App

Build your app using the ares-package** CLI command (part of the webOS CLI).**
Build Command: Use the -n flag to disable source code minification, example:
ares-package -n app_folder service_folder
Important: Clean BuildRemove all dynamic files from the app and service folders before building. Examples: logs, service/data/*.*
8

Self-check your integration

SHARED CONTENT - will add
9

Update Your Terms of Service

SHARED CONTENT - will add
10

Submit your integration for review

SHARED CONTENT - will add

​
How to Update SDK

​
API Documentation