@anvilco/anvil-embed-frame
TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published

AnvilEmbedFrame

AnvilEmbedFrame is a very minimal React component that allows you to embed Anvil Etch e-signatures, Workflows, and embedded builders 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 using this component.

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={(eventObject) => console.log('Event object:', eventObject)}
  className="anvil-embed-frame"
  style={{ border: 'none' }}
/>

Upgrading from v1 to v2

Beginning in v2.0, the enableDefaultStyles prop has been removed. There are now no default styles embedded in the AnvilEmbedFrame, the frame will use default browser iframe styling. You can style the iframe with CSS and add className and style props to the component

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 Workflows include: forgeSubmitPage, forgeComplete, weldComplete.

Defaults to (eventObject) => {}

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

Anvil Documentation

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 support@useanvil.com to enable iframe embedding for our embedded builders UIs: the PDF template builder, e-sign packet builder, or Workflow builder.
  • React >= v16.0 required.

Bugs

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

Questions or Feedback

Please email us at support@useanvil.com.

License

MIT

Package Sidebar

Install

npm i @anvilco/anvil-embed-frame

Weekly Downloads

3,179

Version

2.2.0

License

MIT

Unpacked Size

21.4 kB

Total Files

12

Last publish

Collaborators

  • allan-anvil
  • benogle
  • anvilbot
  • newhouse
  • winggo
  • fostimus