Support Chatwoot Expanded Bubble

[billykwok]

This PR introduces support for Chatwoot Expanded Bubble.

Standard Bubble

This is what react-live-chat-loader already supports.

Expanded Bubble

This is what this PR adds.

The text and the styles of the expanded bubble are applied when the new launcherTitle prop is specified. launcherTitle is the same name used in the official Chatwoot API.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/calibreapp/react-live-chat-loader/9viwkDhVtiWK5o9gUNiXGg5S6qHW
✅ Preview: https://react-live-chat-loader-git-fork-billykwok-cha-6c7d02-calibreapp.vercel.app

[CLAassistant]

All committers have signed the CLA.

[benschwarz]

@billykwok Thanks for your contribution 🙌

Could you update README to include the new configuration option, possibly link to the official chatwoot config option? (assuming there's a direct link)

[billykwok]

Thanks for looking at it promptly. Updated.

[benschwarz]

@billykwok I added the new configuration option to the Chatwoot demo page, but it looks like when Chatwoot loads the configuration option isn't passed:

Screen.Recording.2022-03-03.at.12.31.06.pm.mov

[billykwok]

To enable Expanded Bubble in the real Chatwoot widget, you also need to set the corresponding properties in the window.chatwootSettings object as per Chatwoot documentation.

It will work if you execute the following code in the dev tool console before triggering the replacement of the fake chat bubble.

window.chatwootSettings = { type: 'expanded_bubble', launcherTitle: 'Get help' };

I did not add the code for setting these properties to react-live-chat-loader because doing so would introduce a global side effect into the React component (plus the content of window.chatwootSettings also affects other features apart from Expanded Bubble).

Perhaps I could add an extra remark in README.md to remind library users to set the corresponding properties in the window.chatwootSettings object when using Expanded Bubble.

Alternatively, I can make it such that the Chatwoot component reads the window.chatwootSettings object and apply a different design automatically. But it would unfortunately make the React component depend on some global states.

[benschwarz]

@billykwok I think a README update would be helpful. If you're able to add that documentation I'd be happy to copy edit and get it merged.

[aaron5670]

Hi @benschwarz and hi @billykwok what is the status of this MR? I really like to have this feature :)