How to add AxelChat widget to OBS and set a custom style

[3dproger]

AxelChat widgets allow you to display chat and various information in OBS using custom styles. So, here's what you need to do:

1. Open the Widgets section in Settings window
2. Copy the link of the widget you need. For example, here is a link for a widget that displays chat messages:

3. In OBS, add the Browser source

4. In the URL field, enter the copied link and click OK

5. If you want to customize the widget style, use CSS styles. For example, you can find styles here: Custom styles for AxelChat widgets (Custom CSS) #621

6. Copy the CSS code of the style you want to use and paste it into the Custom CSS field:

7. For greater stability of the widget, check this box. This will also allow you to refresh the widget by switching the scene (which is more convenient):

8. It's also recommended to launch AxelChat before launching OBS. Otherwise, OBS won't be able to automatically launch the widget until the browser source is refreshed (see below how). This issue is planned to be addressed in the future: Widgets: Make it so that the widget can be launched even without AxelChat running, even if the widget is not fully functional #793

9. New versions of OBS now feature a Refresh button. This will help you refresh a widget if it hasn't loaded or loaded with errors. This button appears when you select the appropriate widget source in the Sources section: