Joyfill allows developers to add all the power of our Fillable Forms and PDFs, Form Previewer, and more directly in a mobile optimized way directly within WebViews.

Step 1: Get User Access Token

In order to use a Joyfill Embed you will need a user access token. A user access token is how Joyfill will authenticate your mobile WebView session.

Learn how to generate a user access token here: User Access Tokens

Step 2: Constructing Embed URL

The WebViews will be utilizing the Joyfill Embed URL.

We currently only recommend you use the Joyfill Embed URL with a mode of "fill" or "readonly", within a WebView. Learn more about modes here

Construct the link

https://app-joy.joyfill.io/embed?mode=<mode>&document=<document_id>&userAccessToken=<token>

URL Attributes

Property	Type	Description
mode	String	Required. Specifies what display mode the component should be in. Learn more about modes here: https://docs.joyfill.io/docs/modes
document	String	Optional. Specifies an existing Joyfill document/template identifier that should be loaded into the iFrame.
userAccessToken	String	Pass a valid user access token that is retrieved via our API using your organization ID

Step 2: Add Web View

React-Native Example

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{
       uri: "<REPLACE_JOYFILL_EMBED_URL>"
			}}
    />
  );
}

Flutter Example

import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Views',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          fontFamily: "Arial",
          textTheme: TextTheme(
              button: TextStyle(color: Colors.white, fontSize: 18.0),
              title: TextStyle(color: Colors.red))),
      home: Home(),
    );
  }
}

import 'package:flutter/material.dart';
import 'web_view_container.dart';
class Home extends StatelessWidget {
  final _links = ['<REPLACE_JOYFILL_EMBED_URL>'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: SingleChildScrollView(
                child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: _links.map((link) => _urlButton(context, link)).toList(),
    ))));
  }
  Widget _urlButton(BuildContext context, String url) {
    return Container(
        padding: EdgeInsets.all(20.0),
        child: FlatButton(
          color: Theme.of(context).primaryColor,
          padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 15.0),
          child: Text(url),
          onPressed: () => _handleURLButtonPress(context, url),
        ));
  }
  void _handleURLButtonPress(BuildContext context, String url) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => WebViewContainer(url)));
  }
}

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}
class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Expanded(
                child: WebView(
                    key: _key,
                    javascriptMode: JavascriptMode.unrestricted,
                    initialUrl: _url))
          ],
        ));
  }
}

iOS Example

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"http://app-joy.joyfill.io/embedded/userAccessToken=<your_userAccessToken>&mode=fill")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

Android Example

Coming Soon