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

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

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

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

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