widgetbot-io/crate

Popup Discord widgets for your website ☄️

crate's Issues

Floating Div causes issues

There's a floating div created by the widget which prevents clicking anything behind it. Super inconvenient on mobile specially.

Allow Join Even If widgetbot.io is Down

Always show "Join" button with invite link even if widget has troubles with working (server is down, exception is caught, other error happened, etc.).

Crate close button causes overlap when location changes

The close button in the default placement is neatly displayed to the right of message entry.

If moved to the top and left, the close button overlaps channel selection and is given priority.
If moved to the top and right, the close button overlaps join and is given priority.
If moved to the bottom and left, it overlaps a portion of message entry and is given priority.

I was unable to find an option for editing the location of the close button as part of the API, but the easiest solution appears to be hardcoding the close to the window, instead of moving it along with the crate button.

Prototype Pollution in immer (security vulnerability)

Mentions aren't rendered in crate notifications

Mentions (user mention, channel mention or role mention) aren't formatted in the small popup message of the crate.
Custom emotes also aren't formatted, which probably would be difficult to do tho.

Crate Notifications from multiple channels

I used to have a notification channel that pulled information from multiple different sources, and the Crate on my website served as a handy tool for users to see these notifications occur in realtime. However, because of how different all of those notifications were, I had to split them up into separate channels. Now, the Crate only listens and posts notifications from a single channel.

Would it be possible to allow Crate to listen and post notifications from a group of channels? I know you have to specify a channel when setting it up, and that's the one that initially renders, so this may be out of the scope of it, but figured I would open a FR to at least see if that could be done or even made sense.

How to set "outline: none" for crate?

I'm trying to get rid of outline on crate button, but it isn't working.

Could anyone help me with the correct CSS for this?

My website https://rauldipeas.github.io/blog

Events emitted by Crate

It would be really good to have some events emitted by the Crate object which could be used by the app/website where it's installed. Example:

create.on('ready', (data) => {
   console.log('App is ready', data)
})

Personally I'd like to be able to see an event when the app is ready and is displaying first batch of messages. This way my app could display custom preloading animation and only show the widget when it's ready to use.

Discord API comes with a whole set of events so maybe that's a good starting point to move them over to crate.

Crate doesn't load properly sometimes

I've been having this issue recently, once in a while Crate just doesn't load and shows a tall WidgetBot embed in the bottom right corner. I see this once in a while and today one of our users reported it.

Also, the notification count badge shows in the top right corner of the screen.

[Reopen] Crate not working with Content Security Policy

I am reopening #13 since I think I have found an instance of eval that is not negated by setting "no-eval"=true.

In src/util/validate/index.ts Line 62, there is an eval that I don't quite understand the purpose of. However, it seems this code is there to validate options to Crate?

Perhaps it can be made optional or this eval removed another way?

This small change will I believe solve much of the problems with using CSP!

i can't run widgetbot because of this error:

I have tried running this application ,but I am faced with this problem:

error: unknown option '-d'

It creates the "dist" folder but the rest seems to be unsolved as "-d" remains an unknown command.

Usage with Vue

I'm trying to integrate the Crate button with my existing Vue application (via a Nuxt plugin), however it seems to not work properly

import Crate from '@widgetbot/crate';

export default ({app}) => {
    app.$crate = new Crate({
      // options
    });
};

Which results in the following error(s) (mostly seeming to be related to it not being a React app?)

From my looking at the examples, something like this should be working fine, although those pull in via a script tag, so it could be a different situation.

Not work due to cookie error

On mobile, Crate always sticks to bottom right corner

When Crate detects it is being run on a mobile device, the button always sticks to the bottom right corner, but the appearance of the button changes to fit the set location.

Crate not working with Content Security Policy

Hi, I'm trying to add crate to my site and CSP is blocking the script because it uses eval()
It will be nice if you can remove eval() from the script.

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive

eval() - JavaScript MDN

Request: Translate Join Button to Different Languages

Based on Accept-Language HTTP header show "Join" button in different languages.

Close button covers content if not set to bottom right

Bottom left

Top left

Top right