SCSS not loading in web widget

Sendbird Chat API/SDK JavaScript
1

Hi Sendbird Team,
I am trying to implement Sendbird Web Widget chat in angular project and i am doing modify in widget.js file like channel filtering and user filtering things but when i add all files of Web Widget like js folder and scss folder. I also attached the screen shot file structure of our project.
image

image
image775Ă—811 39.7 KB

when i run the project then error occurr in console.
image
image1544Ă—83 2.65 KB

why is error occurring?
can you guide me how to scss files load in angular project?

2

Setting up web widget on angular project might be super dependent on your project setup/what bundler you use and what plugins you use with them

Another option is to try building the web widget into JS/CSS files as mentioned in this example(react) and
import the “compiled” files into your project

https://github.com/sendbird/SendBird-JavaScript/blob/master/web-widget/CUSTOMIZE.md -

3

@Sravan_S,
Actually my web app originally running with Angular CLI along with web-pack. recently i have integrated the sendbird react.js UIKit successfully.
Now I am trying to integrate web widget in same app.

4

If you use webpack, https://webpack.js.org/loaders/sass-loader/ adding sass-loader might be the best bet
Also, can you show your command line, are there any errors

5

Hi @Sravan_S,
There is no error in command line and we already added sass-loader in webpack but same error is occurring in browser console.

6

This might be a little difficult to see without seeing your setup, can you share a minimum reproducible sample in a hosted service?

1 Like
7

Thanks @Sravan_S,
I implemented web widget successfully in own project. Thanks for you support.

8

Can you explain how did you fix the issue, it would be helpful in the future if we know
:slight_smile:

9

@Sravan_S,
Yes sure its not a big deal. we didn’t define widget.js file path in webpack.config.js that’s way scss files not loaded in project and Not Found error was coming in browser console.Actually our application build on angularjs and typescript before that we are not using scss files in our application.

@Sravan_S i have a couple of questions regarding web widget. Actually I wrote a method which get the all users from our database so I have users list so how can i pass custom user list to widget.js ? In React.js UIKit we pass users in userListQuery. how can pass users list in widget.js?

1 Like
10

how can pass users list in widget.js?

I havent worked that much with webwidget, my quick thought would be to override this part → https://github.com/sendbird/SendBird-JavaScript/blob/master/web-widget/src/js/adapter.js#L185

You might have to rewrite this part

11

@Sravan_S,
can i call own api method from here?

12

Yes, it is a possible work around

Another work around is, to rewrite this part

to something like:

const myCustomQueryFactory = () =>  {
   return {
       hasNext: bool,
      isLoading: bool,
       next: (callback) => {
              const result:[User] = request.get() 
              callback(result) 
       }
   }
}

this.userListQuery = new myCustomQueryFactory();
1 Like
13

@Sravan_S,
Thanks i look into this solution. Thanks for your quickly response.

14

Basically, you should be mimicking ApplicationUserListQuery -> quite similar to CustomUserPaginatedQuery

https://docs.sendbird.com/javascript/ui_kit_key_functions#3_customize_the_user_list

1 Like
15

Yes @Sravan_S but actually, as I told you that our web application builds on angular js we are not using react.js in the application. we used react.js only to send bird UIKit. But now I am implementing the same logic on the web widget which already implemented on react.js UIKit. Like

  1. Custom Type Channel
  2. Create own users List
    something like that