@anvilco/anvil-embed-frame

AnvilEmbedFrame

A very minimal component that allows you to embed Anvil Etch e-signatures, Workflows, and editors into your app with an iframe. It will give you information via callback onEvent.

See the Etch e-sign live demo and open-source demo repository for an embedded Etch e-sign usage example.

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.

Usage

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"
/>

Props

iframeURL

String (required) - A URL to the Anvil page you'd like to embed. For Etch e-sign, refer to these docs for instructions on generating the signing URL. For Workflows, refer to these docs for instructions on retrieving the Workflow URL.

Example

// Etch e-signatures
<AnvilEmbedFrame
  iframeURL="https://app.useanvil.com/api/etch/verify/QL3RjmpXWBD4W6YCHSLr?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaWduZXJJZCI6MTg3LCJjbGllbnRVc2VySWQiOiJzaWduZXIxIiwiY3JlYXRlZEF0IjoxNjY0NTY4NTkyNTk0LCJleHRyYSI6IkNVQlIiLCJpYXQiOjE2NjQ1Njg1OTIsImV4cCI6MTY2NDY1NDk5Mn0.RMpoBXdAU5k6ozX3y2xoI8ykqx2BXycIKNX7Kq0EFFs"
/>

// For Workflows
<AnvilEmbedFrame
  iframeURL="https://app.useanvil.com/weld/my-org/my-workflow"
/>

onEvent

Function - This function is called when an event is triggered. Possible event types for Etch e-sign include: signerComplete, signerError Possible event types for Workflwos include: forgeSubmitPage, forgeComplete

Defaults to (eventObject) => {}

enableDefaultStyles

Boolean - Set to false to disable the default inline styles of the component.

Defaults to true.

scroll

String - Set scroll to the iframe

• auto - scrolls the window to the iframe when mounted
• smooth smoothly scrolls the window to the iframe when mounted
• null - disables scrolling

Styling

Customize the component by setting the enableDefaultStyles prop to false, then import CSS or pass in inline styles. Override IDs or classNames by passing them in as props.

Anvil Documentation

• Get started with Anvil API
• Etch E-sign API
• Workflows API

Notes

• To enable iframe embedding, go to your organization's settings in Anvil, and enable "Iframe Embedding" in the API section.
• Please contact us at [e-mail] 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 [e-mail].

License

MIT