# Web Elements (NEW!)

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:

   <pre class="language-tsx"><code class="lang-tsx"><strong>import {
   </strong>  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
        &#x3C;KollaSDKProvider token={consumerToken}>
          
         // This renders a connector button and will facilitate connecting and disconnecting for whatever user is associated with the provided consumerToken   
         &#x3C;ConnectorButton connectorID={"slack"} />
       &#x3C;/KollaSDKProvider>
     );
   }
   </code></pre>

This will render a Slack connector button on your page.

<div><figure><img src="https://150191288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKrlHxfmg9RkU2Lu5cZWU%2Fuploads%2FIIm182nNN2hWZVe0E8KV%2Fconnect.png?alt=media&#x26;token=c45ae5af-57df-4c02-a42b-de8e710891ae" alt=""><figcaption><p>This button shows when your user isn't linked yet</p></figcaption></figure> <figure><img src="https://150191288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKrlHxfmg9RkU2Lu5cZWU%2Fuploads%2FWGwGizcW2XhOJgC6tsLk%2Fdisconnect.png?alt=media&#x26;token=8803f486-e2f8-47c4-993b-c234da3843ab" alt=""><figcaption><p>This button shows when your user is already linked</p></figcaption></figure></div>

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:

```tsx
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:

```tsx
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!