📛Embeddable Badge

Summary

The Liquicert React component library allows you to embed a liquicert badge in your own react app. Install it in your app with:

npm i react-liquicert-components

At the top of your page import the badge component:

import {LiquicertBadgeFromCID} from "react-liquicert-components";
npm i react-liquicert-components

Then embed the badge by passing it the CID ('ba...') of the trust path:

<LiquicertBadgeFromCID pathCID='bafkreiaw45kqjymlycpiukfmnix2b63pmyxxoz6ctw7zmjspkr2utwqmku'/>

You can get the trust path CID either manually by searching for a path to a piece of content on liquicert.io/content, or by using lc.savePath in js-liquicert.

Tutorial: New React App with a Trust Badge in 5 minutes

Make a new React app using Vite and integrate a Liquicert Trust Badge

Step 1: Create your React App

Create the app by running the following command in the terminal:

npm create vite@latest test-liquicert-badge --template react

Use the arrow keys and enter to select React:

And then select Javascript:

If you have Vite installed already this should be really fast. If not it might take a few minutes.

Step 2: Install packages

cd into your project folder and install the default packages:

cd test-liquicert-badge

npm install

Then install the Liquicert component library:

npm i react-liquicert-components

Step 3: Add the Liquicert badge to your app

Open the application file in your favorite IDE. It should be test-liquicert-badge/src/App.jsx

Import the Liquicert Badge component at the top of your file:

import {LiquicertBadgeFromCID} from "react-liquicert-components";

And add the component somewhere on your page:

<LiquicertBadgeFromCID pathCID='bafkreiaw45kqjymlycpiukfmnix2b63pmyxxoz6ctw7zmjspkr2utwqmku'/>

Make sure to save!

The file should look like this (see the import statement on line 5 and the badge on line 20):

Step 4: Run your app

Back in the terminal, in the app directory:

npm run dev

This should launch the app and give you a localhost address:

Copy that address and open in your browser, probably: http://localhost:5173/

Your app should look like this, and have a mouseover effect displaying the trust path. You've integrated a Liquicert Trust Badge - congrats! 🎉