Integrating the UI SDK into a non-React application
Last updated
CSPR.click v1.3
Last updated
This page guides you through the steps required to integrate the UI SDK into an application without the React library.
Check also the HTML/Javascript demo in the repository to see the resulting application. In that repo you can find also examples or few other libraries/frameworks.
Before the closing head tag, add a script element to download the CSPR.click scripts:
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.
Also, depending on the layout of your application and the grid system you're using, you'll need to add some CSS styles to the container to match the styles of the rest of the app.
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 tob bar and the root container of your app. We'll see other options later in this document.
Next, define Client SDK options:
Finally, in most of the cases your application will need to respond to respond to some events updating the state, initiating a user session, etc. For that purpose, add a listener for the csprclick:loaded message and register your callback functions for the different events triggered by the CSPR.click library:
At this point, your application should show the CSPR.click top navigation bar and you can click on Sign in button to process with the connection of your favorite wallet.
Note in the console that the application is receiving the events when you connect, disconnect, etc.
if your application already has its own Sign in and session management controls you can opt-out and hide CSPR.click navigation bar. To do so, do not include any of the settings selector and set showTopBar to false:
You can read more about events in the page.
To finish this guide, let's add some of the prebuilt components. You can to fit the needs of your application. In the code example below we're adding a theme selector and a network selector as well as a couple of menu items to the account dropdown menu.
