Асинхронный тип подключения виджета является рекомендованным для исполнения кода в браузере клиента.

Асинхронно подключенный виджет не блокирует загрузку основного контента.

В случае его полной недоступности, он не вызовет ошибок и не сломает основную функциональность сайта.

Для интеграции виджета вставьте в конец тела документа следующий код:

<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>
								

Виджет готов к работе!

Данный тип контента представляет из себя страницу перехода (landing page) с изображениями, текстом и видео.

Для удобства использования виджет предоставляет два метода для работы с ним:

- findAndInsert: дает возможность найти рич-контент и автоматически вставить его в блок;

- find: схож с методом findAndInsert, отличается возможностью манипулировать контентом вручную.

Пример транслируемого контента

Flutter плагин для создания виджетов 24STREAM Rich Page.

Установка

В AndroidManifest.xml добавить разрешение на выход в интернет.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  ...
  <uses-permission android:name="android.permission.INTERNET"/>
  ...
</manifest>

Для установки добавьте stream24 в зависимости внутри pubspec.yaml вашего проекта.

dependencies:
  ...
  stream24: ^0.1.2
...

Использование

Stream24RichPage

Webview виджет с рич контентом и автоматической настройкой высоты.

GetHtml

Возвращает HTML код страницы в виде строки.

Примеры использования

Используя 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: 'TestBrand',
            productId: '920-969696',
            retailerDomain: '24ttl.ru',
            templateType: 'master_template',
            language: 'ru',
            contentType: Stream24ContentType.minisite,
            onError: (errorMsg){ print(errorMsg); }
        );
    }
}

ИЛИ

Используя 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: 'TestBrand',
            productId: '920-969696',
            retailerDomain: '24ttl.ru',
            templateType: 'master_template',
            language: 'ru',
            contentType: Stream24ContentType.minisite));
  }



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

Android плагин для использования Rich Page виджетов 24STREAM.

Установка

В AndroidManifest.xml добавить разрешение на выход в интернет.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  ...
  <uses-permission android:name="android.permission.INTERNET"/>
  ...
</manifest>

Для установки вам понадобится добавить JitPack в список репозиториев (если вы еще этого не сделали).
В старых проекта в корневом build.gradle файле добавьте  maven { url = uri("https://www.jitpack.io")} внутрь блока allprojects->repositories:

 allprojects {
    repositories {
      ...
     maven {
            url = uri("https://www.jitpack.io")
        }
    }
 }

В новых проектах он добавляется в settings.gradle. Он должен быть указан в dependencyResolutionManagement->repositories:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
       maven {
            url = uri("https://www.jitpack.io")
        }
    }
}

Далее вам необходимо добавить сам плагин в зависимости(в build.gradle модуля приложения):

dependencies {
    ...
   implementation("stream.24ttl.git.pub:24stream_android:0.5.3") 
}

Использование

RichPage

Webview виджет с рич контентом и автоматической настройкой высоты.

GetHTML

Возвращает HTML код страницы в виде строки.

Примеры использования

Используя 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, "24ttl.ru", "TestBrand", "920-969696",  "master_template", "ru", ::onError, Stream24.Stream24ContentType.minisite)
        setContentView(rich)
    }
}


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

Используя 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("TestBrand", "920-969696", "24ttl.ru", "master_template", "ru", Stream24.Stream24ResultType.html, Stream24.Stream24ContentType.minisite)
        webview.getSettings().javaScriptEnabled = true
        webview.loadData(html,
            "text/html", "UTF-8")
        setContentView(webview)
    }
}

iOS плагин для создания виджетов 24STREAM Rich Page.

Установка

24STREAM доступен в CocoaPods и Swift Package Manager. Для установки, добавьте следующую строку в Podfile:

pod '24stream'

Для установки через Swift Package Manager:

File -> Add packages... -> Вбейте в поиск 'https://git.24ttl.stream/pub/24stream_swift' -> Add package

Использование

Для начала следует импортировать плагин: import _24stream. После этого можно будет использовать функционал плагина:

WebView

Пример

import SwiftUI
import _24stream

struct ExamplePage: View {

    //необходимо для автоматического расчета высоты
    @State var richHeight: CGFloat = 0
    func setHeight(height:Float ) {
        richHeight = CGFloat(height)
    }

    // для обработки любых ошибок
    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()
    }
}

Возвращает постраничный список карточек рич-контента, доступных вашей площадке. Метод используется как для первичной выгрузки всего списка, так и для получения только обновлённых карточек по фильтру updatedAt.

Запрос

url -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": ["er_id"]
   }, 
 }
}
' \

Параметры тела запроса

Фильтры по updatedAt удобно использовать для регулярного получения только изменившихся карточек — например, раз в час или раз в день за предыдущий период.

Ответ 200

{
  "code": 200,
  "message": "",
  "data":{
    "cursor": "eyJpZCI6...",
    "items": [
      {
        "reId": "12345678-1234-1234-1234-123456789012",
        "skuId": "ABC12",
        "isActive": true,
        "updatedAt": "2026-08-01T10:30:00+00:00",
        "name": "Название товара",
        "brand": "Название бренда",
      }
    ]
  }
}

Поля ответа

Возвращает HTML рич-контента для одной карточки по её reId.

Запрос

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": "en",
    "contentType": "minisite",
    "template": "master_template",
    "format": "html",
    "source": "index.html"
  }'

Параметры

Ответы

Ответ 404

Возможные значения поля code в ответе 404:

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

Первичная загрузка рич-контента

• Вызовите метод 1 и, проходя по пагинации, получите все доступные карточки.
• Сопоставьте свои товары с карточками по skuId. Сохраните reId, skuId и updatedAt.
• По reId скачайте HTML рич-контента (метод 2) и привяжите его к своему товару по паре reId + skuId.

Получение обновлений (по фильтру updatedAt)

• Возьмите максимальный сохранённый updatedAt из своей базы (lastUpdatedAt = max(updatedAt)) и запросите метод 1 с фильтром filters.updatedAt.gt = lastUpdatedAt. Можно выполнять раз в час или раз в день.
• Сравните полученный список обновлённых карточек с текущим состоянием вашей базы и примените действия по таблице ниже.
• Для добавления или обновления контента используйте метод 2.

Матрица решений:

Получение обновлений (полная выгрузка)

• Получите весь список карточек, доступных вашей площадке (метод 1 без фильтра по дате).
• По skuId найдите соответствующий товар и примените действия по матрице решений выше (добавить, обновить или снять рич-контент).

Для получения API-ключа, идентификатора ритейлера и параметров подключения обратитесь к вашему ритейл-менеджеру.