calibreapp/react-live-chat-loader

[Feature Request] Ability to style components

taijuten opened this issue · 5 comments

taijuten commented

What problem would this feature solve?

Currently Intercom allows certain positional changes. It is not possible to mirror this, since the <Intercom> component uses hard-coded styling, other than the color

Describe the solution you’d like to see

Ability to pass in a style object to override any defaults

mikedijkstra commented

Hi @taijuten — Thanks for logging this issue.

Ideally we'd like to make our component APIs the same as the provider APIs so you can almost just copy/paste the settings. In addition to this it's easier to manage responsive behaviour inline with how the provider behaves.

Looking at the Intercom Docs it seems we should add support for:

  • alignment: "left" or "right" (default to right)
  • vertical_padding: Minimum value of 20, not used on mobile
  • horizontal_padding: Minimum value of 20, not used on mobile

Is this something you'd like to contribute to the package? If so we can help you work through a PR.

  • 👍3
Undistraction commented

Just an additional note. There is also currently no way to control z-index for the placeholder button. In our case this means that by default, the placeholder button is displayed in-front of our cookie-consent which is not what we want. There is no way to override the styles of the placeholder button as they are inline and the button doesn't provide an ID to hook onto. Obviously we can hack round this by rendering it inside another container, however in the case of Intercom, this introduces subtle differences in layout behaviour on iOS.

benschwarz commented

@Undistraction thank you for sharing this feedback.

The z-index is set 1 higher than wha intercom's official widget uses.

That way, intercom loads and appears underneath the faux widget, which is then hidden.

I have no qualms with adding style attribute support, but it's worth noting that you'd still have to override intercoms widget too.

What do you think?

Undistraction commented

@benschwarz I think adding a class to the placeholder button (and/or accepting a style object) would provide a lot of flexibility to consumers of this package with relatively minimal change your end.

Undistraction commented

In fact, I think adding a class is definitely worthwhile because it would allow both elements to be styled at the same time:

.live-chat-loader-placeholder,
.intercom-container {
  z-index: XXX;
}