Skip to main content

Web View

Accrue is available as a webview for both iOS and Android platforms, as well as cross-platform frameworks like Flutter, by leveraging the WebView functionality available in each platform.

Installation​

The process of embedding the widget in a native app is very similar to the process of embedding it in a web page. The only difference is that instead of using an iframe, you will use a WebView.

Each platform has its own way of embedding a WebView. Here are some references for the most popular platforms:

Once you have embedded the WebView, you can load the widget using the URL provided by Accrue Savings.

Here is an example of the URL:

Widget URL
https://embed[-sandbox].accruesavings.com/webview?merchantId={yourMerchantId}

Please reach out to your Accrue Savings representative to get your Merchant ID and the URL to load the widget.

Usage​

This is an example of how to embed the widget:

The following code will open Accrue Savings widget in a new sheet, simulating the behavior of what we have in the web version.

iOS WebView
import SwiftUI
import WebKit
struct ContentView: View {
  @State private var showWebView = false
  // Replace this URL with the widgetUrl
  private let url: String = widgetUrl

  var body: some View {
      VStack(spacing: 40) {
          Spacer()
          // Button to open the WebView
          Button(action:{
              showWebView.toggle()
          }){
              Text("Accrue Savings")
            .fontWeight(.bold)
            .foregroundColor(.white)
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.black)
            .cornerRadius(25)
          }.sheet(isPresented: $showWebView, content: {
              WebView(url: URL(string: url)!)
          })
      }
      .padding()
  }
}

struct WebView: UIViewRepresentable{
  var url: URL

  func makeUIView(context: Context) -> WKWebView {
    let webview =  WKWebView()
    webview.navigationDelegate = context.coordinator
    webview.uiDelegate = context.coordinator
    return webview
  }
  func updateUIView(_ uiView: WKWebView, context: Context) {
    let request = URLRequest(url: url)
    uiView.load(request)
  }
  func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }
  class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
      var parent: WebView

      init(_ parent: WebView) {
          self.parent = parent
      }
      // Open external links in the browser
      func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
            if navigationAction.targetFrame == nil || !navigationAction.targetFrame!.isMainFrame {
                // Load the request in the web browser
                UIApplication.shared.open(navigationAction.request.url!)
            }
            return nil
      }
  }
}
#Preview {
  ContentView()
}