Se recomienda la conexión asíncrona para que el código se ejecute en el navegador de su cliente.

El widget de conexión asíncrona no bloqueará la carga del contenido principal.

Si resulta completamente inaccesible, no causará ningún error ni romperá la funcionalidad principal del sitio web.

Para integrar el widget, inserte el siguiente código al final del cuerpo del 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>
								

¡Ahora el widget está listo para su funcionamiento!

Este tipo de contenido es una landing pafe con imágenes, texto y vídeo.

Para facilitar su uso, el widget proporciona dos métodos de operación:

- findAndInsert: este método permite encontrar contenido enriquecido e insertarlo automáticamente en el bloque;

- find: un método es similar a findAndInsert, que además proporciona la capacidad de manejar el contenido.

Ejemplo de contenido de transmisión

Flutter plugin para crear widgets 24STREAM Rich Page.

Instalación

Para llevar a cabo la instalación, agregue stream24 a las dependencias dentro del archivo pubspec.yaml de su proyecto.

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

Uso

Stream24RichPage

El widget Webview con contenido enriquecido y ajuste automático de altura.

getHtml

Devuelve el código HTML de la página como una cadena.

Ejemplos de uso

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

O

Usando 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 automáticamente la altura, agregue el siguiente bloque
      ..addJavaScriptChannel("FlutterWebviewHeight",
          onMessageReceived: (JavaScriptMessage msg) {
        setState(() {
          height = double.tryParse(msg.message) ?? 0;
        });
      })
      //////////////////////////////////////////////////////////////////



      // si desea mostrar errores en contenido 404, agregue el siguiente bloque
      ..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 de Android para utilizar widgets Rich Page de 24STREAM.

Instalación

Para llevar a cabo la instalación, necesitará agregar JitPack a la lista de repositorios (si aún no lo ha hecho). En proyectos antiguos, en el archivo build.gradle principal, agregue maven { url 'https://jitpack.io' } dentro del bloque allprojects->repositories:

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

En proyectos nuevos, se agrega en settings.gradle. Debe especificarse en dependencyResolutionManagement->repositories:

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

Luego, debe agregar el propio plugin a las dependencias (en el build.gradle del módulo de la aplicación):

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

Uso

RichPage

Widget de WebView con contenido enriquecido y ajuste automático de altura.

GetHTML

Devuelve el código HTML de la página como una cadena.

Ejemplos de uso

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

Usando 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 de iOS para crear widgets Rich Page de 24STREAM.

Instalación

24STREAM está disponible en CocoaPods y Swift Package Manager. Para instalar a través de Cocoapods, agregue la siguiente línea al Podfile:

pod '24stream'

Para instalar a través del Administrador de paquetes Swift:

File -> Add packages... -> Escríbelo en la búsqueda 'https://git.24ttl.stream/pub/24stream_swift' -> Add package

Uso

Primero, importe el plugin: import _24stream. Luego podrá utilizar las funciones del plugin:

WebView

Ejemplo

import SwiftUI
import _24stream

struct ExamplePage: View {

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

    // para manejar cualquier error
    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()
    }
}

Devuelve un listado paginado de las tarjetas de contenido enriquecido disponibles para su plataforma. El método se utiliza tanto para la descarga inicial del listado completo como para obtener solo las tarjetas actualizadas mediante el filtro updatedAt.

Solicitud

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 del cuerpo de la solicitud

Los filtros por updatedAt son útiles para obtener con regularidad solo las tarjetas que han cambiado, por ejemplo, una vez por hora o una vez al día para el período anterior.

Respuesta 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": "Nombre del producto",
        "brand": "Nombre de la marca"
      }
    ]
  }
}

Campos de la respuesta

Devuelve el HTML del contenido enriquecido de una tarjeta por su reId.

Solicitud

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

Respuestas

Respuesta 404

Valores posibles del campo code en la respuesta 404:

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

Carga inicial del contenido enriquecido

• Llame al método 1 y, recorriendo la paginación, obtenga todas las tarjetas disponibles.
• Asocie sus productos con las tarjetas mediante skuId. Guarde reId, skuId y updatedAt.
• Descargue el HTML del contenido enriquecido por reId (método 2) y vincúlelo a su producto mediante el par reId + skuId.

Obtención de actualizaciones (con el filtro updatedAt)

• Tome el valor máximo de updatedAt guardado en su base de datos (lastUpdatedAt = max(updatedAt)) y llame al método 1 con el filtro filters.updatedAt.gt = lastUpdatedAt. Puede hacerse una vez por hora o una vez al día.
• Compare el listado de tarjetas actualizadas con el estado actual de su base de datos y aplique las acciones de la tabla siguiente.
• Para añadir o actualizar contenido, utilice el método 2.

Matriz de decisiones

Obtención de actualizaciones (descarga completa)

• Obtenga el listado completo de tarjetas disponibles para su plataforma (método 1 sin filtro de fecha).
• Busque el producto correspondiente por skuId y aplique las acciones de la matriz de decisiones anterior (añadir, actualizar o retirar el contenido enriquecido).

Para obtener la clave API, el identificador del retailer y los parámetros de conexión, diríjase a su gerente comercial.