Embed Meetergo Booking Page in a Native App

Overview

This guide demonstrates how to embed meetergo's booking page into a native iOS, Android, or cross-platform app using a WebView component.

Use Case: Incorporate the full meetergo booking experience into native app flows while maintaining control over look, feel, and permissions.

Prerequisites

• A meetergo account with a configured booking page
• Native app development environment (iOS, Android, or cross-platform)

Implementation

Step 1: Generate a meetergo booking page URL

Construct your booking page URL including query parameters for customization and prefilling attendee information:

https://my.meetergo.com/your_username/booking_page_name?first_name=Sam&last_name=Brock

Tip: Read more about prefilling customer information here.

Step 2: Create a WebView Component

Add a native WebView component to your application:

iOS

import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    @IBOutlet var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "https://my.meetergo.com/...")!
        webView.load(URLRequest(url: url))

        webView.navigationDelegate = self
    }

    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
        if let url = navigationResponse.response.url, url.path == "/integrations/postbooking" {
            // Handle callback
        }
        decisionHandler(.allow)
    }
}

Android

class MainActivity : AppCompatActivity() {

  private lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)

      webView = findViewById(R.id.webview)
      webView.webViewClient = WebViewClient()

      val bookingUrl = "https://my.meetergo.com/..."
      webView.loadUrl(bookingUrl)

      webView.shouldOverrideUrlLoading = {
          if (it.startsWith("meetergo://")) {
              // Handle callback
          } else {
          webView.loadUrl(it)
          }
          true
      }
  }
}

React native

import { WebView } from "react-native-webview";

function BookingPage() {
  const bookingUrl = "https://my.meetergo.com/...";

  return (
    <WebView
      source={{ uri: bookingUrl }}
      onMessage={event => {
        const { data } = event.nativeEvent;

        // Handle callback data
      }}
    />
  );
}

Step 3: Configure Callback Scheme

Enable your app to listen for postMessage callbacks:

• Android: ShouldOverrideUrlLoading()
• iOS: DecidePolicyFor navigationAction
• React Native: OnMessage prop

Check for a domain match and handle data as needed.

Step 4: Add Styling and Workflow

With the WebView now rendering the meetergo page, you can:

• Embed it into your app screens
• Apply native styling
• Add buttons to control the WebView behavior
• Connect workflows before and after booking

Support

For additional assistance, contact our support team.