Skip to main content

Embedding in an iOS app

Getting started​

You will need two files. ViewController.swift (the webview controller) and webview.html (the static HTML file which is loaded ). The code for the two files are provided below.

The ViewController.swift creates the webview component and serves the webview.html file.

The widget embed HTML codes sits in the static webview.html HTML page, here you update the configurable parameters as needed.

How it works​

In this case, we’re injecting a script to the widget in which we set the public key before the page finishes loading.

Note: You have to configure trusted domains with the page host included for the widget to load successfully in your iOS mobile app.

ViewController.swift​

This files generates the webview component and on line 14, serves the webview.html file to the user in your iOS mobile app.

ViewController.swift
import UIKit
import WebKit

class ViewController: UIViewController {
  var wkWebView: WKWebView!

  override func viewDidLoad() {
    super.viewDidLoad()

    let config = WKWebViewConfiguration()
    wkWebView = WKWebView(frame: view.bounds, configuration: config)

    view.addSubview(wkWebView!)
    let url = Bundle.main.url(forResource: "webview", withExtension: "html")!
    wkWebView.loadFileURL(url, allowingReadAccessTo: url)
  }
}

webview.html​

This is where your HTML, CSS, and JavaScript sits required to embed the Business Score widget.

Note: Please do not modify HTML body styles or widget’s height config param in webview.html for a better experience on your iOS mobile app.

webview.html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Business Score webview iOS display view</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      position: fixed;
    }
  </style>

  <script src="https://wdjs-s.scorethebusiness.com/widget.js"/></script>
  <script>
   var vhPx =
     Math.max(
      document.documentElement.clientHeight || 0,
      window.innerHeight || 0,
     ) + "px";

   document.addEventListener('DOMContentLoaded', function() {
     var widgetOptions = {
       elementId: 'body',
       publicKey: 'YOUR_PUBLIC_KEY',
       height: vhPx,
       width: "100vw",
       exitEnabled: false, //Please, see configurable parameters for more details https://docs.scorethebusiness.com/reference/config-paramaters
     };

     var loadingMessage = document.getElementById('loading');
     if (loadingMessage) {
       loadingMessage.style.display = "none";
     }

     BusinessScoreWidget(widgetOptions).show();
   });
  </script>
 </head>
 <body id="body"><h3 id="loading">Widget loading...</h3></body>
</html>