Integration Guide

👋

Usage

For a limited time, Truepic is offering our library script to anyone, free of use, without needing account registration.

Human or AI-generated, original or edited—details matter. Our Content Credentials display library helps users understand the media they’re viewing in their browser by visualizing signed provenance data. It reveals the origin and history of any C2PA-compatible digital file.

Below is a guide that walks you through the simple steps to embed the library and signed media on your website.

Signed Media

The Content Credentials pin and metadata information in the overlay can only show up on valid, signed files.

If you have signed media already, that’s great! You can preview how our display will look by visiting display.truepic.com. If not, consider our C2PA signing toolkit. You can also generate signed media with Adobe Photoshop by enabling Content Credentials (beta) on your work. Truepic Display does not show any information about images and audio/video recordings that do not contain C2PA metadata.

The next step is to ensure that your asset hosting and delivery solution does not modify your assets upon upload. Unfortunately, many systems are known to strip metadata like EXIF and C2PA-compliant metadata during processing. If known signed media does not display any credentials in the overlay, something upstream likely stripped it from your file after you uploaded it. See our guides for integrating the library into Shopify and WordPress content management systems.

Library Integration

☑️

Notice

By using this library, you agree to Truepic's terms and conditions.

Simply add this script anywhere on the page, which could be the head or the body. The script will automatically update as we improve our tool, without any code changes required on your part.

<script type="module" src="https://display.truepic.com/truepic_display.es.js"></script>

Wrap media manually

The final step is to wrap each element that displays signed files in a truepic-display custom element.

<truepic-display>
  <img src="..." />
</truepic-display>

Example

Wrap media automatically

Many CMSes don't allow access to wrap images directly. In that case, your editor may still allow you to add a class, such as c2pa to the images instead. Then, you can add JavaScript to your page that wraps those images only:

<script>
const imgElements = document.querySelectorAll('img.c2pa');

imgElements.forEach((imgElement) => {
	const wrapper = document.createElement('truepic-display');
	imgElement.parentNode.insertBefore(wrapper, imgElement);
	wrapper.appendChild(imgElement);
});
</script>

Video

If you are embedding mp4s, note that browser-native video players do not persist overlaid elements in fullscreen mode, so the icon and overlay will not appear there. Only the native <video> element is supported at this time, but we plan to support commercial and open source players to validate streaming media in the future.

<truepic-display>
  <video src="..." controls playsinline />
</truepic-display>

By default, MP4 validation is a two-step process: an initial check on a small (under 600KB) video chunk to quickly flag issues in the manifest store, followed by an option for the user to download and validate the entire file, ensuring the complete hash of the video validated, but without causing unnecessary large downloads that the user didn't opt into. Due to limitations with frontend browser API, mp4 videos can't be monitored with JavaScript to see if they have been downloaded already to automatically validate them. As a workaround, when the video element itself is set to autoplay, the display script will automatically download and validate the video (if the browser is also playing back the video, it will be served from cache rather than downloaded twice).

The truepic-display element also has a configuration option to either prevent or always automatically validate the video.

<truepic-display>
  <video src="..." controls playsinline autoplay />
</truepic-display>

<truepic-display autovalidate="true"> <!-- can also  be FALSE or undefined -->
  <video src="..." controls playsinline />
</truepic-display>

Example

Audio

Audio in m4a format is also supported using the native <audio> element. Due to its shape and size, the icon is positioned to the right of the player to avoid covering the controls.

<truepic-display>
  <audio src="..." controls />
</truepic-display>

Attributes

Troubleshooting

If the icon is not appearing on your media, check:

• The script tag appears correctly on the page
• Image, video, and audio tags are wrapped with the truepic-display custom element
• That the media file still has the provenance data preserved. You can use our Display preview tool to do this on a hosted asset quickly. Append the absolute path of your media file to this url:
  https://display.truepic.com/?source=
  Visit your constructed url in your browser. If C2PA data is no longer present, no Cr pin will appear. If that’s the case, check your asset hosting and delivery solution to ensure that the media files are not getting modified after they are uploaded.

Next Steps

Now that you have Content Credentials display live online with signed media, congratulations! You’ve joined the flourishing movement for content transparency. Transparency is our most powerful tool in the quest for greater authenticity online. It protects brands and creators, reduces business and security risks, informs consumers, and generally makes the internet a more authentic place for everyone.

Please contact us if you have any questions or comments about our library.