Option 2: Web Views

Embed Joyfill through a WebViews

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


URL Attributes

modeStringRequired. Specifies what display mode the component should be in. Learn more about modes here: https://docs.joyfill.io/docs/modes
documentStringOptional. Specifies an existing Joyfill document/template identifier that should be loaded into the iFrame.
userAccessTokenStringPass 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 (

Flutter Example

import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  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>'];
  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) {
        MaterialPageRoute(builder: (context) => WebViewContainer(url)));
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
  final url;
  createState() => _WebViewContainerState(this.url);
class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  final _key = UniqueKey();
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
                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() {
        let myURL = URL(string:"http://app-joy.joyfill.io/embedded/userAccessToken=<your_userAccessToken>&mode=fill")
        let myRequest = URLRequest(url: myURL!)

Android Example

Coming Soon