[Feature Request] Customize Intercom Background Color?

What problem would this feature solve?

I'd love to be able to customize the Intercom background_color before initialization. Before using react-live-chat-loader I would simply put that in my window.Intercom('boot') call, but no there's nowhere to put it.

Describe the solution you’d like to see

I'd like for either the color prop to also apply to the background, or for a backgroundColor prop to be added to LiveChatLoaderProvider.

Describe alternatives you’ve considered

I currently use the onReady callback to switch the background color after Intercom loads, but it can cause the default blue to flash to my color on the user's screen if they click the button before Intercom lazy loads.

My background color workaround is imperfect because it briefly shows blue before switching to my color. However, it seems that could be solved just removing this setTimeout?

react-live-chat-loader/src/providers/intercom.ts

Lines 67 to 72 in 8003539

    
           // Allow intercom to complete loading before removing fake widget 
        
           () => 
        
             setTimeout(() => { 
        
               setState('complete') 
        
               onReady() 
        
             }, 2000)

Why is there an extra two seconds of wait time when waitForLoad has already waited?

Thanks.

Hey @zaptrem, in the repo README we say:

You can customise the color of the Intercom widget by passing a color prop to the Intercom component.

Have you tried using the color prop? I noticed you've said:

I'd like for either the color prop to also apply to the background

Looking at the implementation, the color property is applied to the background..

Did you want to give that a try and let me know how it goes?

Why is there an extra two seconds of wait time when waitForLoad has already waited?

To be perfectly honest, I don't remember. Casting back to when it was implemented (and reading the code comment), I think it was because waitForLoad fired before all resources were ready, so there was a visual glitch. The 2 second delay was likely a workaround for that.

Looking at the implementation, the color property is applied to the background..

It seems to be applied to the background of the button, not the actual Intercom interface. If I were to remove the two second wait for you what should I test to verify it doesn't break anything?

Ah, I understand. Thanks for the clarification. To set Intercom properties, you should use window.intercomSettings messenger settings. You can find the docs for that here.

On our README.md we say:

User or Company context data can be set using window.intercomSettings. See the official Intercom documentation for more details.

Which is misleading, because messenger settings can be set also. I've updated the README (#135) to reflect that.

Ah, I understand. Thanks for the clarification. To set Intercom properties, you should use window.intercomSettings messenger settings. You can find the docs for that here.

On our README.md we say:

User or Company context data can be set using window.intercomSettings. See the official Intercom documentation for more details.

Which is misleading, because messenger settings can be set also. I've updated the README (#135) to reflect that.

I was able to use that to fix my issue. Thanks!

Great news! Thanks for reporting back @zaptrem ⚡

	// Allow intercom to complete loading before removing fake widget
	() =>
	setTimeout(() => {
	setState('complete')
	onReady()
	}, 2000)