Integration Guide

Use webview_flutter with a JavascriptChannel named GamiflyBridge. The embed page's window.parent.postMessage arrives in the channel's onMessageReceived callback.

// pubspec.yaml dependency: webview_flutter: ^4.x
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class GameScreen extends StatefulWidget {
  const GameScreen({super.key});
  @override State<GameScreen> createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'GamiflyBridge',      // must match window.parent postMessage target
        onMessageReceived: (msg) {
          final data = jsonDecode(msg.message) as Map<String, dynamic>;
          _handleEvent(data);
        },
      )
      ..loadRequest(Uri.parse(
        'https://gamifly-api.bts.id/embed'
        '?tenantCode=YOUR_TENANT_CODE'
        '&gameCode=GAME_CODE'
        '&userKey=PLAYER_ID',
      ));
  }

  void _handleEvent(Map<String, dynamic> data) {
    switch (data['type']) {
      case 'GAME_RESULT':
        final score   = data['session']['finalScore'];
        final rewardId = data['session']['rewardId'];
        // Show your own result UI or grant reward via your backend
        debugPrint('Score: $score  Reward: $rewardId');
        break;
      case 'GAME_BACKLINK':
        // Player tapped the backlink button — handle navigation natively
        final url = data['url'] as String?;
        if (url != null && url.isNotEmpty) {
          // e.g. open in-app browser or push a new route
        } else {
          Navigator.of(context).pop(); // 'close' mode
        }
        break;
      case 'GAME_CLOSE':
        Navigator.of(context).pop();
        break;
    }
  }

  @override
  Widget build(BuildContext context) =>
    Scaffold(body: WebViewWidget(controller: _controller));
}

// The embed page uses window.parent.postMessage — Flutter's JavascriptChannel
// intercepts those messages automatically when the channel name matches.
// If your embed is inside a nested iframe, you may need to inject a small
// script that forwards window.top.postMessage to GamiflyBridge.postMessage().

Use WebView with addJavascriptInterface. Override WebViewClient.shouldOverrideUrlLoading to catch same-tab navigations, and the JS interface to catch postMessage events.

// Kotlin — add to build.gradle: implementation("androidx.webkit:webkit:1.x.x")
import android.webkit.*
import org.json.JSONObject

class GameActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        webView = WebView(this)
        setContentView(webView)

        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled  = true

        // Bridge object — methods annotated @JavascriptInterface are callable from JS
        webView.addJavascriptInterface(GamiflyBridge(), "GamiflyBridge")

        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
                // Catch same-tab backlink navigations
                val url = request.url.toString()
                if (url.startsWith("http")) {
                    startActivity(Intent(Intent.ACTION_VIEW, request.url))
                    return true
                }
                return false
            }
        }

        webView.loadUrl(
            "https://gamifly-api.bts.id/embed" +
            "?tenantCode=YOUR_TENANT_CODE" +
            "&gameCode=GAME_CODE" +
            "&userKey=PLAYER_ID"
        )

        // Forward window.parent.postMessage to the native bridge
        webView.evaluateJavascript("""
            window.addEventListener('message', function(e) {
                if (window.GamiflyBridge) {
                    GamiflyBridge.onMessage(JSON.stringify(e.data))
                }
            })
        """.trimIndent(), null)
    }

    inner class GamiflyBridge {
        @JavascriptInterface
        fun onMessage(json: String) {
            val data = JSONObject(json)
            when (data.optString("type")) {
                "GAME_RESULT" -> {
                    val score    = data.getJSONObject("session").getInt("finalScore")
                    val rewardId = data.getJSONObject("session").optString("rewardId")
                    runOnUiThread { /* update your UI */ }
                }
                "GAME_BACKLINK", "GAME_CLOSE" -> {
                    runOnUiThread { finish() }  // dismiss the activity
                }
            }
        }
    }
}

Use WKWebView with a WKScriptMessageHandler named gamiflyBridge. The handler receives all postMessage events from the embed page.

// Swift — WKWebView with WKScriptMessageHandler
import UIKit
import WebKit

class GameViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        // Register the bridge — must match the name used in postMessage interception
        config.userContentController.add(self, name: "gamiflyBridge")

        // Inject a script that forwards window.parent.postMessage to the native bridge
        let forwardScript = WKUserScript(
            source: """
                window.addEventListener('message', function(e) {
                    if (window.webkit && window.webkit.messageHandlers.gamiflyBridge) {
                        window.webkit.messageHandlers.gamiflyBridge.postMessage(e.data)
                    }
                })
            """,
            injectionTime: .atDocumentEnd,
            forMainFrameOnly: false   // false so it also runs inside the game iframe
        )
        config.userContentController.addUserScript(forwardScript)

        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)

        let url = URL(string:
            "https://gamifly-api.bts.id/embed" +
            "?tenantCode=YOUR_TENANT_CODE" +
            "&gameCode=GAME_CODE" +
            "&userKey=PLAYER_ID"
        )!
        webView.load(URLRequest(url: url))
    }

    // WKScriptMessageHandler — called for every postMessage from the embed page
    func userContentController(_ controller: WKUserContentController,
                               didReceive message: WKScriptMessage) {
        guard let body = message.body as? [String: Any],
              let type = body["type"] as? String else { return }

        switch type {
        case "GAME_RESULT":
            if let session = body["session"] as? [String: Any] {
                let score    = session["finalScore"] as? Int ?? 0
                let rewardId = session["rewardId"]  as? String
                // Handle on main thread — update UI or call your backend
                DispatchQueue.main.async { /* update UI */ }
            }
        case "GAME_BACKLINK":
            let url = body["url"] as? String ?? ""
            DispatchQueue.main.async {
                if url.isEmpty {
                    self.dismiss(animated: true)  // close mode
                } else {
                    // open URL in-app or push a new screen
                    if let target = URL(string: url) {
                        UIApplication.shared.open(target)
                    }
                }
            }
        case "GAME_CLOSE":
            DispatchQueue.main.async { self.dismiss(animated: true) }
        default:
            break
        }
    }
}