Adding a meetergo WebView Booking Page in a Native App

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

Overview

A WebView allows you to render web content like HTML, CSS, and JS natively without leaving your app. This provides a seamless way to incorporate the full meetergo booking experience into native flows while still controlling look, feel, and permissions via the native shell.

We will implement a WebView that:

• Renders meetergo's embedded booking page
• Passes data like names or emails to prefill booking forms
• Listens for booking confirmed callbacks to handle post-booking actions

Implementation

The steps will vary slightly depending on your target platform:

1. Generate a meetergo booking page URL

Construct your unique booking page URL including any query string parameters for behavior customization and prefilling attendee information:

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

2. Create a Web View Component

In your code, add a native WebView component to an Activity or ViewController.

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

Populate the URL from Step 1.

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.

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, and connect workflows before and after booking.

And that's it! The embeddable booking page provides a flexible way to integrate scheduling without needing to build it yourself or leave your app.