New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@anvilco/anvil-embed-frame

Package Overview
Dependencies
Maintainers
6
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@anvilco/anvil-embed-frame

The AnvilEmbedFrame React component for embedded Etch signatures and Workflows.

  • 2.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5K
decreased by-3.09%
Maintainers
6
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 02 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc