As you know, our goal at Invofox is to make developer's lives easier. One of the ways we can do it is by saving them the trouble of having to build certain things, and instead being able to plug in something that just... works🎉

This guide is to set you up with our document UI, so you don't have to build it.

👀 First, let's take a look at it

This is how our document interface looks like:

Pretty simple, right? Document on the left side, information on the right side (friendly reminder: you can customize the information displayed on the right side, so it only shows the data fields relevant to your use case).

On top of that, this interface can be configured so it:

• Does or doesn't display the left-side menu.
• Doest or doesn't display the top header.

Lastly, you'll be able to benefit from Invofox's shortcuts, allowing your users to handle documents without lifting their hands off the keyboard:

🏗️ Now, let's build it

The way to put this together is fairly simple; you embed this interface into an iframe referencing the URL app.invofox.com/documents/[ID], where [ID] is of course your document's id.

If you test it right away, you'll see that you only get our login page; that's because you need to add information that allows us to identify you and meets our cybersecurity requirements. In order to do that, you need to call the login token endpoint in our API, which will yield a token with a 1 hour TTL for the API user or for the user whose id you inform in the body of the request under the key user.

After doing so, you have to call the URL app.invofox.com/documents/[ID]?token=[TOKEN] in your iframe, where [ID] is again your document's id, and [TOKEN] is the token you just got.

Lastly, anytime the user corrects or discards a document, you'll get a message event between windows with the document's information.

Now, you're all set! Let us know if you have any questions!