The asynchronous connection is recommended to have the code run in your browser client.

The asynchronous-connected widget will not block loading of the main content.

If it is completely inaccessible, it will neither cause any errors nor breal the main functionality of the website.

To integrate the widget, insert the following code into the end of the document body:

<script>
	(function (w, d, s, o) {
		var f = d.getElementsByTagName(s)[0];
		var j = d.createElement(s);
		w.TTLStreamReady = new Promise((resolve) => {
			j.async = true;
			j.src = '//content.24ttl.stream/widget.js';
			f.parentNode.insertBefore(j, f);
			j.onload = function () {
				w.ttlStream = new TTLStream(o);
				resolve(w.ttlStream);
			};
		});
	})(window, document, 'script', {});
</script>
								

The widget is ready for use!

This type of content is a landing page with images, text and video media.

For ease of use, the widget provides two operation methods:

- findAndInsert: the method provides for finding rich content and automatically inserting it into the block;

- find: the method is similar to findAndInsert, additionally provides the ability to manipulate the content.

Example of broadcast content

A flutter plugin for creating 24STREAM Rich Page widgets.

Installation

To install add stream24 plugin to your dependencies in your pubspec.yaml

dependencies:
  ...
  stream24: ^0.1.15
...

Usage

Stream24RichPage

A webview widget with rich html contents and automatic height.

GetHtml

Returns HTML code of the page as a String.

Example

Using Stream24RichPage

import 'package:flutter/material.dart';
import 'package:stream24/stream24.dart';
import 'package:stream24/rich_page.dart';
import 'package:webview_flutter/webview_flutter.dart';



class WebViewPage extends StatefulWidget {
  WebViewPage({super.key});
  @override
  State<WebViewPage> createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return  Stream24RichPage(
            brand: 'Samsung',
            productId: '16651081549',
            retailerDomain: 'irshad.az',
            templateType: 'master_template',
            contentType: Stream24ContentType.shopInShops,
            onError: (errorMsg){ print(errorMsg); }
        );
    }
}

OR

Using getHtml

import 'package:flutter/material.dart';
import 'package:stream24/stream24.dart';
import 'package:webview_flutter/webview_flutter.dart';



class WebViewPage extends StatefulWidget {
  WebViewPage({super.key});
  @override
  State<WebViewPage> createState() => _WebViewPageState();
}



class _WebViewPageState extends State<WebViewPage> {
  late WebViewController controller;
    double height = 120;



  @override
  void initState() {
    super.initState();
       controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)



      // to automatically adjust height add the following block
      ..addJavaScriptChannel("FlutterWebviewHeight",
          onMessageReceived: (JavaScriptMessage msg) {
        setState(() {
          height = double.tryParse(msg.message) ?? 0;
        });
      })
      //////////////////////////////////////////////////////////////////



      //if you want to throw errors on 404 content add the following block
      ..addJavaScriptChannel("FlutterError",
          onMessageReceived: (JavaScriptMessage msg) {
            
        throw Exception(msg.message);
      })
      //////////////////////////////////////////////////////////////////



      ..loadHtmlString(Stream24.getHtml(
          brand: 'Samsung',
          productId: '16651081549',
          retailerDomain: 'irshad.az',
          templateType: 'master_template',
          contentType: Stream24ContentType.shopInShops));
  }



  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: height,
        child: WebViewWidget(
          controller: controller,
        ),
    );
  }
}

An android library for generating 24STREAM HTML widgets to be used in WebView or any other nested browser.

Installation

To install the library you need to add JitPack repository first (if you haven't already).
For older projects in the root build.gradle file add maven { url 'https://jitpack.io' } inside allprojects->repositories like following:

 allprojects {
    repositories {
      ...
      maven { url 'https://jitpack.io' }
    }
 }

For newer projects you need to add it to settings.gradle. It should be in dependencyResolutionManagement->repositories like following:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Then we need to add the dependency itself(in app module build.gradle):

dependencies {
    ...
    implementation 'stream.24ttl.git.pub:24stream_android:0.5.3'
}

Usage

RichPage

A webview widget with rich html contents and automatic height.

GetHTML

Returns HTML code of the page.

Example

Using RichContent

import stream.ttl24.stream24.Stream24

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val rich = Stream24.RichContent(LocalContext.current, LocalDensity.current, "irshad.az", "Samsung", "16651081549",  "master_template", ::onError, "ru_ru",  Stream24.Stream24ContentType.shopInShops)
        setContentView(rich)
    }
}


fun onError(errorMessage:String){
    print(errorMessage)
}

Using GetHtml

import stream.ttl24.stream24.Stream24

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val webview = WebView(this)
        val html = Stream24.GetHTML("Samsung", "16651081549", "irshad.az", "master_template", Stream24.Stream24ResultType.html, Stream24.Stream24ContentType.shopInShops)
        webview.getSettings().javaScriptEnabled = true
        webview.loadData(html,
            "text/html", "UTF-8")
        setContentView(webview)
    }
}

An iOS plugin for generating 24STREAM HTML widgets to be used in WKWebView or any other nested browser.

Installation

24STREAM is available through CocoaPods and Swift Package Manager.

To install it using Cocoapods, add the following line to your Podfile:

pod '24stream'

To install it using Swift Package Manager:

File -> Add packages... -> Search 'https://git.24ttl.stream/pub/24stream_swift' -> Add package

Usage

You need to import it as import _24stream. After that you can use Stream24 namespace which contains:

WebView

Example

import SwiftUI
import _24stream

struct ExamplePage: View {

    //necessary for automatic height calculation
    @State var richHeight: CGFloat = 0
    func setHeight(height:Float ) {
        richHeight = CGFloat(height)
    }

    // for handling any errors
    func onError(error: String) {
        print(error)
    }
    
    var body: some View  {
        ScrollView{
            RichPage(  brand: "TestBrand",
                       retailerDomain: "24ttl.ru",
                       productId: "920-969696",
                       templateType: "master_template",
                       language: "ru",
                       page: "index.html",
                       contentType: _24StreamContentType.minisite,
                       onHeightSet: setHeight,
                       onError: onError).frame(height:richHeight)
        }
        
    }
}

struct ExamplePage_Previews: PreviewProvider {
    static var previews: some View {
        ExamplePage()
    }
}

Returns a paginated list of rich content cards available to your platform. The method is used both for the initial export of the full list and for getting only the updated cards with the updatedAt filter.

Request

curl -X POST https://panel.24ttl.stream/api/v1/retailers/{retailerId}/retailer-epackages/search \
-H "Accept-Charset: utf-8" \
-H "Content-Type: application/json" \
-H "Authorization: ApiKey generatedApiKey" \
-d '{
 "limit": 1000,
 "cursor": "###",
 "fields": ["name", "brand"],
 "filters":{
   "updatedAt":{
     "gte": "yyyy-mm-dd hh:mm:ss",
     "gt": "yyyy-mm-dd hh:mm:ss",
     "lte": "yyyy-mm-dd hh:mm:ss",
     "lt": "yyyy-mm-dd hh:mm:ss"
   },
   "isActive":{
     "eq": true
   },
   "skuId":{
     "in": ["example_sku_id"]
   },
   "reId":{
     "in": ["example_re_id"]
   }
 }
}'

Request body parameters

The updatedAt filters are convenient for regularly getting only the cards that have changed — for example, once an hour or once a day for the previous period.

Response 200

{
  "code": 200,
  "message": "",
  "data":{
    "cursor": "eyJpZCI6...",
    "items": [
      {
        "reId": "12345678-1234-1234-1234-123456789012",
        "skuId": "ABC12",
        "isActive": true,
        "updatedAt": "2026-08-01 10:30:00",
        "name": "Product name",
        "brand": "Brand name"
      }
    ]
  }
}

Response fields

Returns the rich content HTML for a single card by its reId.

Request

curl -X POST https://panel.24ttl.stream/api/v1/retailer-epackages/{reId}/download \
  -H "Accept-Charset: utf-8" \
  -H "Content-Type: application/json" \
  -H "Authorization: ApiKey generatedApiKey" \
  -d '{
    "locale": "ar_en",
    "contentType": "minisite",
    "template": "master_template",
    "format": "html",
    "source": "index.html"
  }'

Parameters

Responses

Response 404

Possible values of the code field in a 404 response:

{
  "code": 4040,
  "message": "Epackage retailer not found",
  "data": []
}

Initial rich content loading

• Call Method 1 and go through all pages to get all available cards.
• Match your products with the cards by skuId. Save reId, skuId and updatedAt.
• Download the rich content HTML by reId (Method 2) and link it to your product by the reId + skuId pair.

Getting updates (with the updatedAt filter)

• Take the maximum saved updatedAt from your database (lastUpdatedAt = max(updatedAt)) and call Method 1 with the filter filters.updatedAt.gt = lastUpdatedAt. This can be done once an hour or once a day.
• Compare the received list of updated cards with the current state of your database and apply the actions from the table below.
• Use Method 2 to add or update content.

Decision matrix

Getting updates (full export)

• Get the full list of cards available to your platform (Method 1 without a date filter).
• Find the corresponding product by skuId and apply the actions from the decision matrix above (add, update or remove rich content).

To receive your API key, retailer identifier and connection parameters, please contact your retail manager.