Skip to main content
You are here: Passport JS EVM SDK

Credenza Presence

Overview

Credenza Presence consists of a set of UI elements designed to integrate Credenza Passport with your website or app. These elements ensure seamless integration and user-friendly experience.

Presence begins with a persistent navigation bar that can be positioned anywhere on the screen. As an overlay, it will not impact the positioning of any elements that already exist in the HTML rendering, though the decision on where to position the overlay may take existing elements into account

Initializing Presence

To display the navigation bar, a call needs to be made to the Passport object:

javascript
passport.showNavigation({"right":"25px","bottom":"50px"});

We recommend the lower right corner of the page. When the user is logged out, the mini banner shows a red dot to indicate the user is logged out

When in the logged out state, clicking on the navigation bar will automatically open a centered dialog box for the user to login

This dialog can also be rendered without the navigation bar support by calling:

javascript
passport.openUI()

Once the user is logged in, the navigation bar will still be rendered, but the dot will turn green. Clicking on the band will open a menu with several options, including purchasing tokens, generating a cryptographically-signed identifying code called Passport ID, scanning a proprietary QR Code called PassScan, managing your account, and signing out.

Handling Cloak Configuration

If you set passport.config.content.cloak to true, the passport login screen will always be shown until the user logs in. This means that even if a user navigates away, they will still see the login prompt until they are successfully logged in.

For example, if a user tries to access other parts of the site without logging in, the login screen will appear, ensuring that only authenticated users access the content. This can add an extra layer of security by making sure that users are logged in before they can interact with certain parts of the application.

To enable this, add the following configuration to your passport config when creating passport instance.

With this configuration, you ensure that users need to log in each time they visit your application, making their experience more secure and authenticated.

Pay Per Article

Credenza's Pay Per Article feature allows users to purchase access to specific content using NFTs.

When attempting to view premium content, a Modal labeled Premium Access Required will appear. This modal informs the user that they need to buy an NFT to access the content.

The modal includes a Button labeled Buy NFT right away. Clicking this button will initiate the purchase of an NFT tied to the specific content.

To configure Pay Per Article, use the payPerArticle array in your configuration. Each entry in this array specifies the NFT required to access the content.

In the example configuration:

  • The nfts array lists the NFT's address and tokens.

  • The uriMasks array includes the domain context, like evm.

  • The primaryAction object defines the text displayed on the purchase button, the NFT contract address, and the token ID.

In this example, clicking Buy NFT right away will purchase the NFT from the specified contract address and token ID, granting access to the article.