Privacy Policy Installation Instructions for Native iOS Apps

This installation uses a WebView to embed your hosted privacy policy web page in your native app. It is for native mobile apps that do not use HTML and CSS for creating and styling elements. If you are building a Progressive Web App (PWA) or using a hybrid framework that uses JavaScript/HTML/CSS (e.g. Cordova), please see the HTML, CSS, JS Frameworks section.

Why do I need a privacy policy?

Having a privacy policy in your app is a legal requirement and is essential for communicating how your business collects and uses your customer data. A privacy policy also helps your business stay compliant with data privacy laws, saving you from potential controversy and expensive fines.

Step-by-Step

Before adding your Enzuzo Privacy Policy to your site, make sure you configure it correctly in the privacy policy settings from the Enzuzo dashboard through the "Configure" page on the top nav.
Once you’ve customized your privacy policy to your liking, click “Add to Website” on the top nav. Select the “Advanced” toggle and choose “Hosted Policy”. Copy the link to the hosted policy.
The next steps will depend on what framework you are using to develop your app. All smartphone operating systems support WebViews; these allow mobile apps to embed web pages with JavaScript functionality inside their apps. Below we have walked through setting one up in SwiftUI — a popular framework for native iOS development — as well as linked to the documentation for the most common iOS hybrid and cross-platform frameworks. If the framework you are using is not listed, please search the appropriate docs for WebViews. Once you have set up a WebView in your app, you simply need to paste the link to your hosted policy to be able to access it in-app.

⚠️ Note: Most WebView components have JavaScript disabled by default. It is necessary to have JavaScript enabled for the policy to be displayed, so please read and follow your framework’s documentation on enabling JavaScript in the WebView.

Native

If you are programming in Swift/Objective-C but you are not using SwiftUI, please see the documentation on WKWebView.

SwiftUI

Open your app’s code repository in Xcode. Go to File > New > File… or press Cmd (⌘) + N and create a new Swift File (e.g. “WebView”) to create the WebView component.

Paste the following code into the file.

import Foundation
import WebKit
import SwiftUI

struct SwiftUIWebView: UIViewRepresentable {

    let url: URL?

    func makeUIView(context: Context) -> WKWebView {
        let prefs = WKWebpagePreferences()
        prefs.allowsContentJavaScript = true
        let config = WKWebViewConfiguration()
        config.defaultWebpagePreferences = prefs
        return WKWebView(frame: .zero, configuration: config)
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard let myURL = url else {
            return
        }
        let request = URLRequest(url: myURL)
        uiView.load(request)
    }
}

Open the main file where you want to instantiate the web page view (e.g. ContentView). Add the WebView with SwiftUIWebView(url: URL(string: "YOUR_POLICY_LINK")). For example, you can add it as a list item in a navigation view:

struct ContentView: View {
    var body: some View {
    NavigationView {
        List {
            NavigationLink(destination: SwiftUIWebView(url: URL(string: "YOUR_POLICY_LINK"))) {
                Text("Privacy Policy")
            }
            .navigationTitle("About")
            }
        }
    }
}

Hybrid and Cross-Platform

Flutter

See the docs for setting up WebView
Once WebView is set up you can embed the hosted policy webpage to your app

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}


class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebView(
        initialUrl: 'YOUR_HOSTED_POLICY_LINK',
   javascriptMode: JavascriptMode.unrestricted, // important to add this, otherwise policy page won't be displayed

      ),
    );
  }
}

React Native

Install the WebView package:

npm i react-native-webview

Import the component and instantiate it:

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

<WebView source={{ uri: "YOUR_HOSTED_POLICY_LINK" }} />

Xamarin

See the docs

NativeScript

See the docs

HTML, CSS, JS Frameworks

Privacy Policy Installation Instructions for Hybrid Web-Based iOS Frameworks

This is for apps that are built for the web but have installed or make use of frameworks that package the code to be accessible via mobile platforms. The most common of these is Apache Cordova.

Since these apps are created in plain HTML, you can easily embed our policies in your app with our script tag. Please see the Add to Website > Embedded Policy option for instructions. Below are notes to keep in mind for the most common frameworks.

Cordova

The boilerplate index.html (/www/js/index.html) does not accept inline scripts by default, which is how our embedded policy is inserted into the DOM. To resolve this, change the first <meta> tag from

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: <https://ssl.gstatic.com> 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

to:

<meta http-equiv="Content-Security-Policy" content="default-src * data: <https://ssl.gstatic.com> 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:;">

Ionic

You will need to add the script tag to the index.html in the public folder, then add the div tag separately where you want the policy, for example, with React:

The code copied from our Add to Website > Embedded Policy or (Basic option):

<div id="__enzuzo-root"></div><script id="__enzuzo-root-script" src="..."></script>

in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>
    <base href="/" />
    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>

  <body>
    <div id="root"></div>
    <script id="__enzuzo-root-script" src="..."></script> // script tag goes here
  </body>
</html>

In one of your views:

const Page: React.FC = () => {
return (
 <IonPage>
 <div id="__enzuzo-root"></div>
 </IonPage>
 );
};
export default Page;