A conexão assíncrona é recomendada para que o código seja executado no cliente do seu navegador.

O widget com conexão assíncrona não bloqueará o carregamento do conteúdo principal.

Se ficar completamente inacessível, ele não causará erros ou quebrará qualquer funcionalidade do website.

Para integrar o widget, insira o seguinte código no fim do corpo do documento:

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

O widget está pronto para o uso!

Este tipo de conteúdo é uma página inicial com imagens, texto e mídia de vídeo.

Para facilitar o uso, o widget fornece dois métodos de operação:

- findAndInsert: o método fornece a possibilidade de pesquisa de conteúdo interativo e de introdução automática no bloco;

- find: o método é semelhante ao findAndInsert, além disso, fornece a habilidade de manipular o conteúdo.

Exemplo de conteúdo de transmissão

Plugin Flutter para criar widgets 24STREAM Rich Page.

Instalação

Para efetuar a instalação, inclua stream24 nas dependências dentro do pubspec.yaml do seu projeto.

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

Utilização

Stream24RichPage

Widget WebView com conteúdo enriquecido e ajuste automático de altura.

GetHtml

Retorna o código HTML da página como uma string.

Exemplos de Utilização

Utilizando 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); }
        );
    }
}

OU

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



      // para ajustar automaticamente a altura, adicione o seguinte bloco
      ..addJavaScriptChannel("FlutterWebviewHeight",
          onMessageReceived: (JavaScriptMessage msg) {
        setState(() {
          height = double.tryParse(msg.message) ?? 0;
        });
      })
      //////////////////////////////////////////////////////////////////



      // se desejar lançar erros no conteúdo 404, adicione o seguinte bloco
      ..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,
        ),
    );
  }
}

Plugin Android para utilizar widgets Rich Page da 24STREAM.

Instalação

Para realizar a instalação, você precisará adicionar o JitPack à lista de repositórios (caso ainda não tenha feito isso).
Em projetos antigos, no arquivo build.gradle raiz, adicione maven { url 'https://jitpack.io' } dentro do bloco allprojects -> repositories:

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

Em projetos novos, ele é adicionado ao settings.gradle. Ele deve ser especificado em dependencyResolutionManagement -> repositories:

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

Em seguida, você precisará adicionar o próprio plugin às dependências (no build.gradle do módulo de aplicativo):

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

Utilização

RichPage

Widget WebView com conteúdo enriquecido e ajuste automático de altura.

GetHTML

Retorna o código HTML da página como uma string.

Exemplos de Utilização

Utilizando 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)
}

Utilizando 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)
    }
}

Plugin iOS para criar widgets Rich Page da 24STREAM.

Instalação

24STREAM está disponível em CocoaPods e Swift Package Manager. Para instalar via Cocoapods, adicione a seguinte linha ao Podfile:

pod '24stream'

Para instalar via Swift Package Manager:

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

Utilização

Para começar, importe o plugin: import _24stream. Depois disso, você poderá usar as funcionalidades do plugin:

WebView

Exemplo

import SwiftUI
import _24stream

struct ExamplePage: View {

    //necessário para cálculo automático de altura
    @State var richHeight: CGFloat = 0
    func setHeight(height:Float ) {
        richHeight = CGFloat(height)
    }

    //para lidar com quaisquer erros
    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()
    }
}

Retorna uma lista paginada dos cartões de conteúdo interativo disponíveis para a sua plataforma. O método é usado tanto para a exportação inicial da lista completa quanto para obter apenas os cartões atualizados com o filtro updatedAt.

Requisição

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"]
   }
 }
}'

Parâmetros do corpo da requisição

Os filtros por updatedAt são úteis para obter regularmente apenas os cartões que mudaram — por exemplo, uma vez por hora ou uma vez por dia, referente ao período anterior.

Resposta 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": "Nome do produto",
        "brand": "Nome da marca"
      }
    ]
  }
}

Campos da resposta

Retorna o HTML do conteúdo interativo de um cartão pelo seu reId.

Requisição

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"
  }'

Parâmetros

Respostas

Resposta 404

Valores possíveis do campo code na resposta 404:

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

Carregamento inicial do conteúdo interativo

• Chame o método 1 e, percorrendo a paginação, obtenha todos os cartões disponíveis.
• Associe os seus produtos aos cartões pelo skuId. Salve reId, skuId e updatedAt.
• Baixe o HTML do conteúdo interativo pelo reId (método 2) e vincule-o ao seu produto pelo par reId + skuId.

Obtenção de atualizações (com o filtro updatedAt)

• Pegue o maior valor de updatedAt salvo na sua base de dados (lastUpdatedAt = max(updatedAt)) e chame o método 1 com o filtro filters.updatedAt.gt = lastUpdatedAt. Isso pode ser feito uma vez por hora ou uma vez por dia.
• Compare a lista de cartões atualizados recebida com o estado atual da sua base de dados e aplique as ações da tabela abaixo.
• Para adicionar ou atualizar conteúdo, use o método 2.

Matriz de decisão

Obtenção de atualizações (exportação completa)

• Obtenha a lista completa de cartões disponíveis para a sua plataforma (método 1 sem filtro de data).
• Encontre o produto correspondente pelo skuId e aplique as ações da matriz de decisão acima (adicionar, atualizar ou remover o conteúdo interativo).

Para obter a chave API, o identificador do varejista e os parâmetros de conexão, entre em contato com o seu gerente de vendas.