Anvil React UI Components

This repo contains multiple React components used to embed Anvil E-signatures, Workflows, and editors into your app or website. Pick and choose the component that best suits your use case, integrate it into your code, and the components will take care of the rest.

The following components will embed the Anvil product in an iframe within your app or website. To enable, go to your organization's settings in Anvil, and enable "Iframe Embedding" in the API section. Test EtchPackets created with isTest: trueand Workflow submissions are embeddable without contacting us.

• AnvilEmbedFrame - an iframe component with a simple onEvent callback for embedding Etch e-sign, Workflows, or editors.
• AnvilSignatureModal - a modal popup window component with lifecycle callbacks for embedding Anvil e-signatures.

See the live demo and open-source demo repository for a usage example of AnvilEmbedFrame and AnvilSignatureModal.

What is Anvil?

Anvil provides easy APIs for all things paperwork.

1. PDF filling API - fill out a PDF template with a web request and structured JSON data.
2. PDF generation API - send markdown or HTML and Anvil will render it to a PDF.
3. Etch E-sign with API - customizable, embeddable, e-signature platform with an API to control the signing process end-to-end.
4. Anvil Workflows (w/ API) - Webforms + PDF + E-sign with a powerful no-code builder. Easily collect structured data, generate PDFs, and request signatures.

Learn more on our Anvil developer page.

AnvilEmbedFrame

A very minimal component that allows you to embed Anvil into your app with an iframe. It will give you information via the onEvent callback.

Usage

See the AnvilEmbedFrame README for full details.

yarn add @anvilco/anvil-embed-frame

npm install @anvilco/anvil-embed-frame

import AnvilEmbedFrame from '@anvilco/anvil-embed-frame'

<AnvilEmbedFrame
  iframeURL={etchSignURL || workflowURL || editorURL}
  onEvent={(event) => console.log('Event object:', event)}
  className="anvil-embed-frame"
/>

AnvilSignatureModal

A minimal modal component that allows you to embed Anvil e-signatures via a modal popup in your app. It will give you information via callbacks through the signing process lifecycle. Compatible with mobile viewports with minimal dependencies.

Usage

See the AnvilSignatureModal README for full details.

yarn add @anvilco/react-signature-modal

npm install @anvilco/react-signature-modal

import AnvilSignatureModal from '@anvilco/react-signature-modal'
import '@anvilco/react-signature-modal/dist/styles.css'

<AnvilSignatureModal
  signURL={signURL}
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  onLoad={() => setLoading(false)}
  onEvent={(eventObject) => console.log(eventObject)}
/>

Links 🔗

• @anvilco/anvil-embed-frame
• @anvilco/react-signature-modal
• Getting started with Anvil API
• Anvil e-signature API docs

Notes

• Please contact us at [email protected] to enable iframe embedding for editors.
• React >= v16.0 required.

Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

Questions or Feedback

Please email us at [email protected].

License

MIT