The asynchronous connection is recommended to have the code run in your browser client.

The asynchronous-connected widget will not block loading of the main content.

If it is completely inaccessible, it will neither cause any errors nor breal the main functionality of the website.

To integrate the widget, insert the following code into the end of the document body:

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

The widget is ready for use!

This type of content is a landing page with images, text and video media.

For ease of use, the widget provides two operation methods:

- findAndInsert: the method provides for finding rich content and automatically inserting it into the block;

- find: the method is similar to findAndInsert, additionally provides the ability to manipulate the content.

Example of broadcast content

A flutter plugin for creating 24STREAM Rich Page widgets.

Installation

To install add stream24 plugin to your dependencies in your pubspec.yaml

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

Usage

Stream24RichPage

A webview widget with rich html contents and automatic height.

GetHtml

Returns HTML code of the page as a String.

Example

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

OR

Using 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: '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,
        ),
    );
  }
}

An android library for generating 24STREAM HTML widgets to be used in WebView or any other nested browser.

Installation

To install the library you need to add JitPack repository first (if you haven't already).
For older projects in the root build.gradle file add maven { url 'https://jitpack.io' } inside allprojects->repositories like following:

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

For newer projects you need to add it to settings.gradle. It should be in dependencyResolutionManagement->repositories like following:

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

Then we need to add the dependency itself(in app module build.gradle):

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

Usage

RichPage

A webview widget with rich html contents and automatic height.

GetHTML

Returns HTML code of the page.

Example

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

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

An iOS plugin for generating 24STREAM HTML widgets to be used in WKWebView or any other nested browser.

Installation

24STREAM is available through CocoaPods and Swift Package Manager.

To install it using Cocoapods, add the following line to your Podfile:

pod '24stream'

To install it using Swift Package Manager:

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

Usage

You need to import it as import _24stream. After that you can use Stream24 namespace which contains:

WebView

Example

import SwiftUI
import _24stream

struct ExamplePage: View  { 

    //necessary for automatic height calculation
    @State var richHeight: CGFloat = 0
    func setHeight(height:Float )  { 
        richHeight = CGFloat(height)
    }

    // for handling any errors
    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()
    }
}