Web Elements (NEW!)

If your product uses React.js, Kolla's Web Elements make it easier than ever to embed Kolla into your product.

For an even simpler way to embed Kolla in your frontend code, use Web Elements. Web Elements are React components that you can import and render easily in your React code. To start, we have a simple button component you can add that shows your users' connected state.

Let's start with an example. If you added a Slack connector to Kolla and the ID for that connector is slack you can render the ConnectorButton element in your app like so:

1. First Install the react SDK: npm i @kolla/react-sdk

2. Use the KollaSDKProvider and add a ConnectorButton component to your page:

   import {
     KollaSDKProvider,
     ConnectorButton,
   } from "@kolla/react-sdk";
   
   
   function App() {
     return (
       // This should be placed near the root of your app
       // This provides context to all of the Kolla UI components
       // pass in your consumer token as a prop
        <KollaSDKProvider token={consumerToken}>
          
         // This renders a connector button and will facilitate connecting and disconnecting for whatever user is associated with the provided consumerToken   
         <ConnectorButton connectorID={"slack"} />
       </KollaSDKProvider>
     );
   }

This will render a Slack connector button on your page.

This button shows when your user isn't linked yet

This button shows when your user is already linked

When your users click on the Connector Button it will open the Konnect Embed modal and allow them to connect their slack account.

Additionally, you can manage the authenticated user using our useKollaSDK react hook:

import {useKollaSDK} from "@kolla/react-sdk";

const useAuthToken = ({token}) => {
  const sdk = useKollaSDK();
  
  React.useEffect(() => {
    if(token && sdk){
      sdk.authenticate(token);
    }
  }, [token]);
};

Styling the Component

You can completely control the look and feel of any Web Elements in our SDK. Here is the typescript with all the properties available to you to control:

export interface ConnectorButtonStyles {
    button?: CSSProperties;
    iconContainer?: CSSProperties;
    icon?: CSSProperties;
    statusContainer?: CSSProperties;
    statusText?: CSSProperties;
}
export interface ConnectorButtonAttributes {
    button?: ButtonHTMLAttributes<HTMLButtonElement>;
    iconContainer?: HTMLAttributes<HTMLDivElement>;
    icon?: ImgHTMLAttributes<HTMLImageElement>;
    statusContainer?: HTMLAttributes<HTMLDivElement>;
    statusText?: HTMLAttributes<HTMLSpanElement>;
}
export interface ConnectorButtonProps {
    connectorID: string;
    styleOverrides?: ConnectorButtonStyles;
    attributeOverrides?: ConnectorButtonAttributes;
    displayTextOverride?: ButtonDisplayTextOverride;
}

What's Next

More components are coming!