Integration Guide
Simple steps to embed the JavaScript display library to show Content Credentials on your site
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
Attribute | Description | Default |
---|---|---|
active | Opens the overlay on load. Without this attribute, the overlay shows when the icon is clicked. | |
theme | Dark mode is enabled in the overlay by default and doesn’t need to be defined, but may be with theme="dark" . To enable light mode, set this attribute to light . | dark |
height | Defines the overlay’s overflow. Defaults to full , allowing the overlay to exceed the height of the media item, while it inherits the media height and scrolls when set to contain . | full |
autovalidate | (audio and video only) Whether to download and validate the video automatically, without the user opting in. - true - always download and validate the video automatically.- false - never download and validate the video automatically.(undefined) - use Truepic's display rules, for example videos set to autoplay will automatically validate | |
minimumSpecVersion | Specify the minimum C2PA spec version's rules to validate the file against. | 1.0 |
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.
Updated about 1 month ago