search
CSPR.cloudCSPR.designCSPR.buildRegister

JavaScript

This page guides you through the steps required to integrate the UI SDK into a non-React application.

Check also the HTML/Javascript demo in the csprclick-examplesarrow-up-right repository to see the resulting application. In that repo you can find also examples or few other libraries/frameworks.

hashtag
Download the CSPR.click UI runtime library from the CDN:

Before the closing head tag, add a script element to download the CSPR.click scripts:

  <!-- update to latest released version -->
  <script defer="defer" src="https://cdn.cspr.click/ui/v1.9.0/csprclick-client-1.9.0.js"></script>
</head>

hashtag
Add a container for the CSPR.click UI

In your main layout file, add a <div> container where CSPR.click will inject some UI components like the navigation top bar or the 1-click sign in modal. Set an id, you'll need it later during CSPR.click initialization.

<body>
  <div id="app">
    <div id="csprclick-ui"></div>
    <div id="content">
     <!-- you rapplication goes here -->
    </div>
  </div>
</body>

Also, depending on the layout of your application and the grid system you're using, you'll need to add some CSS styles to this container to match the styles of the rest of the app (width, background color, etc).

hashtag
Configure the initialization of the CSPR.click SDK

In a javascript file, add the initialization options for the CSPR.click SDK. Make sure this script loads before CSPR.click is downloaded.

The minimal configuration for the UI just defines the container for the navigation top bar and the root container of your app. We'll see other options later in this document.

Next, define Client SDK options:

You can read more about the CsprClickInitOptions object in the reference section.

hashtag
What's next

At this point, your application should show the CSPR.click top navigation bar and you can click on Sign in button to connect your favorite wallet.

hashtag
Listen to CSPR.click events

You'll need to listen and respond to some events triggered when the user connects an account, switches to a different one, or closes the session.

Refer to the Handling events page for information on how to add your listener functions.

hashtag
Ask the user to connect a wallet

If you don't display the CSPR.click top navigation bar, you must have your own Sign in or Connect buttons and respond calling the CSPR.click library .

Refer to the Connecting a wallet page for information on how to trigger the wallet connection process.

hashtag
Request transaction approvals

At some point, your application will need to interact with the Casper network by sending a transaction (aka deploy). CSPR.click manages this process communicating with the active wallet to request the user to approve or reject the transaction. The UI depends on the wallet.

Refer to the Signing transactions page for information on how to request the user a transaction approval. Also, look at Processing status updates for information on how to listen for real-time status updates.

hashtag
Customize the top navigation bar

You can add any of our predefined settings selectors or account menu items. And you can define your own.

Refer to the Customizing the top bar section for complete reference on how to work with each of the setting elements in the top bar.

Last updated