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 — no API key, no backend changes, and no server-side code required. The form handles everything securely on its own.

When a form is submitted, an inspection is created and sent to the recipient specified in the form. 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.

🚀
Two lines of HTML is all you need. Add the script tag, drop in the form element, and you're live. The component is hosted on Truepic's CDN and updates automatically — no re-deployments on your end.

Getting Started

Open the Vision Dashboard and click Settings > Website Forms. 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 re-deployment 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.

Name	Description	Required	Default
`inspection-type-label`	The display name to use for the "Inspection Type" field that appears when multiple Inspection Types are configured for the Website Form.	No	Inspection Type
`token`	The token generated for the Website Form created in the Vision Dashboard.	Yes

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.

Variable	Description	Default
`--tvf-color-primary`	The primary color that's used for things like buttons, focused inputs, etc.	`#1b1b1b`
`--tvf-color-primary-mix`	Variations of the primary color are created for states like hover, focus, etc. This is the color that's mixed with the primary color to create the variations. Use a lighter color (like white) for the variations to be lighter or a darker color (like black) for the variations to be darker.	`#fff`

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.

Name	Description	`detail` Property
`tvf-success`	Dispatched when the user successfully submits the form to create an inspection.	`undefined`

Example

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

// Add listener(s):
element.addEventListener('tvf-success', () => {
  // Implement your own custom logic.
})