UIKit config in Sendbird Dashboard

On this page, you'll learn how to quickly build Sendbird UIKit for Chat on Sendbird Dashboard with just a few lines of code.

Before installing Sendbird Chat SDK, you need to create a Sendbird application on the Sendbird Dashboard, which comprises everything required in a chat service including users, messages, and channels. You will need the App ID of your Sendbird application when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. In the same context, only one UIKit config is allowed per application.

Follow the steps to quickly build UIKit from the dashboard.

Log in to Sendbird Dashboard and under Chat, find Try UIKit for Chat. Once selected, you'll be guided through an onboarding session for UIKit config.

To view the image in full screen, click on the

When UIKit config setup is finished, you can easily navigate to customize UI components for your app. Customization may include turning on or off UIKit features. Preview of the app is also available on the dashboard. Once you’re satisfied with the preview, see our documentation page to build your app.

To view the image in full screen, click on the

The code-level configuration is necessary after the initial UIKit config setup is finished on the dashboard.

UIKit feature configuration can be done through the uikitOptions prop in the SendbirdProvider component as shown in the code below.

const App = () => {
 return (
   <SendbirdProvider //
     uikitOptions={{
       groupChannel: {
         enableTypingIndicator: true,
         enableReactions: true,
       },
     }}
   />
  );
};

Note: To see the object full structure and its comments for uikitOptions, refer to this CodeSandbox sample.

To check if the UIKit config has been applied correctly, refresh your browser. Because the UIKit config isn't applied in real-time, it's important to remember that the configuration will be applied after the changes' first connection. In addition, check the app attributes and its priority.

• UIKit config is created to manage UI of UIKit, whereas already existing app attributes are created to manage features. However, if the features aren't turned on, UI won't show on the screen. Therefore, UIKit config depends on app attributes. Currently, UIKit config's message search, OG tag, and reactions depend on app attributes. If these features are turned off in Chat SDK, but turned on in UIKit config, the features won't work in UIKit config. So make sure that these features are turned on from the Chat SDK side.

• Values set by code has higher priority than the values set on the dashboard. If you're already using UIKit, it's most likely that your app will have the settings by code. In this case, even if you configure from the dashboard, it will be ignored.

UIKit config has the following accesses for owner, admins, and users.

• Owner can have access to edit and view UIKit config.
• Admin can also have access to edit and view UIKIt config.
• Users can only have access to view UIKit config.