Nucleic Photon Magnetizer

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

    1.1.0 • Public • Published

    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

    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 editors.
    • 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

    Install

    npm i @anvilco/anvil-embed-frame

    DownloadsWeekly Downloads

    14

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    12

    Last publish

    Collaborators

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