Create Inspections Within Your Website

Website Forms is the easiest way to start creating inspections with Truepic Vision. Drop a pre-built web component into your website, and your customers or employees can submit inspection requests directly from the page. The form handles everything securely on its own.

When a form is submitted, an inspection is created and a link to start it is shown right on the page, with the option to send it by text or email. You review completed inspections in the Vision Dashboard. Whether the webpage is an internal system accessible only by your employees or a public portal for your customers, you can integrate it in a few minutes.

Getting Started

Open the Vision Dashboard and click Settings > Website Forms. Create a Website Form (or open an existing one), and make sure your website's domain (like https://www.example.com) is listed in the form's Allowed Domains, since the form won't work on any other domain. Then copy the token of the Website Form, which you'll need to complete the integration on your website.

Import the Script

Add the following within the <head> of your page, although anywhere within the <body> also works if that's easier:

<script
  type="module"
  src="https://vision-form.truepic.com/truepic_vision_form.es.js"
  crossorigin
></script>

This JavaScript module defines the <truepic-vision-form> web component and includes all of the default styling. It's hosted by Truepic on our CDN for speed and convenience, and is evergreen with updates rolling out automatically, without any code redeployment on your end.

Add the Element

With the script imported, you can now add the <truepic-vision-form> element into your page's HTML exactly where you want it to appear:

<truepic-vision-form token="{{REPLACE_WITH_YOUR_TOKEN}}"></truepic-vision-form>

Replace {{REPLACE_WITH_YOUR_TOKEN}} with the token that was generated for the Website Form you previously created.

If everything is set up and configured correctly, you should see the form appear on your page. That's it — you're integrated. No API keys to manage, no webhooks to configure, and every submission is secured automatically. Continue reading to learn more about the various ways to configure and customize the form.

Optional: Customize the Form

Attributes

The element can be configured through attributes placed on the opening <truepic-vision-form> tag.

Example

<truepic-vision-form
  token="{{REPLACE_WITH_YOUR_TOKEN}}"
  inspection-type-label="Type of Loan"
></truepic-vision-form>

Styling

The size and position of the element — such as width and margin — can be controlled with CSS just like any other element. We've built it to be responsive, meaning it will expand or contract to whatever space it's given.

The element will also automatically inherit color and font-family properties set for the page.

All additional customization is done through CSS variables.

Example

truepic-vision-form {
  --tvf-color-primary: #1a6dff;
  --tvf-color-primary-mix: #000;
}

Events

Custom events are emitted from the element to enable a deeper level of integration when necessary. These events can be listened for using the standard element addEventListener() interface.

Example

// Get a reference to the element:
const element = document.querySelector('truepic-vision-form')

// Use the event to update your page after Vision creates the inspection.
element.addEventListener('tvf-success', (event) => {
  // Show a confirmation message or return the user to your application workflow.
  // The created inspection's ID is available as `event.detail.id`.
})

What to Read Next

1. Vision Dashboard — Review inspections submitted through your form.
2. Website Forms API reference — Manage Website Forms programmatically.
3. Send Your First Inspection — Use the API instead when your backend needs to create inspections and receive webhooks.