UTU’s Trust API seamlessly serves up personalized recommendations for trusted service providers on sharing platforms to drive your conversion, satisfaction, retention, and viral acquisition.
UTU Trust SDK provides web-components that access UTU’s Trust API and allows you simple integration with its services.
Find the repository here
- Integration with UTU's Trust API
- Compatible with React, Angular, Vue and other popular UI libs and frameworks
- Shadow DOM
- Customized styles, which are not interfere with global CSS rules on a page
``bash`
$ npm install @ututrust/web-components
The SDK can be configured by calling a function on the SDK to inform it what the environment is so
that the SDK talks to the correct endpoints:
`
const config: IConfig = {
production,
provider: walletProvider
};
updateConfig(config);
`
You can find some working examples in the repository
Before running examples, run `npm install` in the root repository folder, then go to `/packages/utu-web-components` and execute `npm run build` command. After that local copy of `@ututrust/web-components` will be available in all examples.
It is advised to review `Quickstart Vanilla JS` first before checking another samples.
Place ` custom tag. It is a parent component for recommendations:
`html
`
The next step is defining recommendations `:
`html`
Just import `@ututrust/web-components` and you are ready to start using UTU SKD.
`jsx
import '@ututrust/web-components';
function App() {
const offerIds = [
'e541df40-74b6-478e-a7da-7a9e52778700'
];
return
export default App;
`
`js`
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return {
...options,
compilerOptions: {
...(options.compilerOptions || {}),
isCustomElement: tag => tag.startsWith('x-')
}
}
})
}
}
Once you import `@ututrust/web-components`, ` and ` are ready to use.
`html
`
Add `CUSTOM_ELEMENTS_SCHEMA` to module schemas
`js
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
`
Import `@ututrust/web-components`. We assume offer ids are in `offerIds` to your component.
`js
// app.module.ts
import { Component } from '@angular/core';
import '@ututrust/web-components';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
offerIds = ['e541df40-74b6-478e-a7da-7a9e52778700']
}
`
Add template:
`html`
To mock an UTU API response, specify `api-url` of `:
`html`
Example of a JSON file can be find at `/packages/utu-web-components/src/api-mock`
Unlock is a library that allows us to charge for access to signal. The SDK can be built / run with unlock integrated or not integrated. This is controlled by an .env file.
Please copy .env_example and rename it to .env
Inside the .env file it has:
`
VITE_USE_UNLOCK=false
If you want to use Unlock set the above variable to true
The local index.html shell now relies on Reown AppKit so contributors can exercise real wallet and account-abstraction flows. Copy .env_example to .env (or .env.local) and ensure the following variable is present:
`
VITE_PROJECT_ID=3fcb9eef628acf7a853f1ca64b984e7d
Feel free to replace it with your own Reown project ID when testing against cloud analytics. After running npm run dev, use the rendered near the top of the demo page to connect a wallet. Once connected the page automatically:
1. Calls updateConfig({ provider }) so Unlock and other components get the injected provider (including AA wallets).addressSignatureVerification
2. Invokes , which fetches a real JWT and dispatches EVENT_UTU_IDENTITY_DATA_READY, allowing mounted components to refresh without any fake events.
The demo shell itself lives under src/demo and is implemented with Preact so it mirrors how downstream apps consume the SDK. Check src/demo/DemoApp.tsx for a reference integration that wires Reown, updateConfig, and the UTU web components together.
`preactjs` allows developing React-like components with state management, hooks and JSX, however its size is about 4kb only, which is create for lib development.
To convert React-like component into web component, we use this approach.
Follow steps below to start local development of UTU Trust SDK.
Install dependencies
`bash`
$ npm install
Start watch mode with preview in a browser.
`bash`
$ npm run dev
To mock out talking to the UTU backend run this command in another terminal window:
`
npm run api-mock
To mock out the video recording make sure you are in this directory:
`
and run this command in another terminal window:
`
npm run start
To test that there are no compilation issues in the Production build run:
`bash`
$ npm run build
Run tests in watch mode
`bash`
$ npm run test
Check lint errors and fix them if possible
`bash`
$ npm run lint
Create tar npm package, so it can be later installed as npm dependency.
`bash`
$ npm pack
This will generate a `.tgz` file at the directory’s root with a structure like this: `{name}-{version}.tgz`. You can install this package with command like this:
`bash`
$ npm install
We maintain two types of releases for the SDK:
- Production release → UnlockGateway enabledUnlockGateway
- Staging release → commented out
---
`bashmake sure main is up to date
git checkout main
git pull
`
➡️ To get FeedbackDetails.tsx to NOT use Unlock for showing feedback you need to set the .env file to have this attribute:
`
VITE_USE_UNLOCK=false
Internally it will not inject the UnlockGateway tags
Note that Unlock functionality is about the user paying to see Signal.
➡️ In package.json
Update the release version number (e.g. 1.2.3)
`bash
git add .
git commit -m "Production release: enabled UnlockGateway + version bump"
git push origin release-[version]
`
---
`bashback to main
git checkout main
git pull
➡️ To get
to use Unlock for showing feedback you need to set the .env file to have this attribute:`
VITE_USE_UNLOCK=true
Internally it will inject the UnlockGateway tags
Note that Unlock functionality is about the user paying to see Signal.
➡️ In
Update the version number with an alpha tag (e.g.
)`bash
git add .
git commit -m "Staging release: commented UnlockGateway + version bump"
git push origin release-[version]-alphabuild + publish staging
npm run build
npm login
npm publish``