Intercom + Fullscreen Elements

#1

Hello everyone,

I am trying to make intercom display at the same time a user is playing video in fullscreen mode, but am wondering if what I am doing is even possible.

So far, I have an eventListener that checks when the #intercom-container exists on the page, and once it does, I move the entire container into the element that is fullscreen (if it is currently fullscreen). The element is a flowplayer video element.

I used this topic to check for the intercom container’s existance.

As of now, intercom is being moved into the video element. However, I think it is sitting behind the player (z-index).

Any suggestions will be greatly appreciated!!

0 Likes

#2

Hi timuism! :wave:

Hmm, I was following you until the “I think it is still sitting everything” part. :thinking: It looks like you’re moving in the right direction with this, but do you mind sharing a bit more about what happens after Intercom gets moved into the video element?

Thanks!

0 Likes

#3

Ah! My mistake, I just edited to make it a little more clear. Hope it helps.

I terms of what happened after Intercom gets moved (and I realized this after the original post),
it is not moving all of the intercom elements. The blue circle stays out, and the elements inside are being moved into flowplayer.

0 Likes

#4

Got it, thanks! :blush:

Editing the Messenger’s z-index property is something that you could try, but we don’t usually recommend doing that as it could cause some unforeseen issues. Instead you could try to edit the z-index of the <video> element — it looks like Flowplayer actually has a tutorial about how to play video behind the other elements that may help you with that. :point_right: https://flowplayer.com/demos/background-video

And regarding the Messenger launcher (ie. the blue circle) not moving into the <video> element, you could trying moving the <div> element that contains both the Messenger and its launcher — div#intercom-container. While in theory that should move all of the Messenger elements together, that isn’t something that we officially support, so that may not work as expected.

Hopefully you can use both of those ideas as a couple of starting points, and I’ll flag this as a feature request with our product team now for them to review. I can’t guarantee any sort of ETA, but you can always track any updates that we make on our Product Changes page. :+1:

0 Likes

#5

Yeah I have tried messing with the z-index values, but both are set to the z-index browser limit of 2147483647. So I quickly found that lowering that number would cause lots of weirdness.

The flowplayer background video is a really good idea, but given the project, I won’t be able to go that route. I think I am going to have to create an element inside of the flowplayer UI that will mimic intercom’s launcher; but will simply exit fullscreen mode and show launch intercom.

Thanks a lot for your help!

0 Likes