📛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:
At the top of your page import the badge component:
Then embed the badge by passing it the CID ('ba...') of the trust path:
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:
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:
Then install the Liquicert component library:
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:
And add the component somewhere on your page:
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:
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! 🎉
Last updated
