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

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