0

I'm integrating an embedded chat using a VFP in Experience cloud site. (Only solution proposed by Salesforce as the chat is interacting with another Salesforce org).

enter image description here

The button is configured within Experience cloud builder using VFP and this css so that the button can move with me when i scroll down :

{ z-index:999; width: fit-content; position:fixed; right: 0; bottom: 0; }

The problem i'm facing is that the VFP iFrame is preventing click-on links (see screenshot). In fact, i can no longer click on links under the related links box. I tried to reduce the height of the VFP but if i do so i can no longer see correctly the inside of the chat button. enter image description here

UPDATE

I see that event without having z-index property applied to the VF component of the experience builder. Its height only is sufficient to overlay the components.

So i changed its height to 100px something smaller and i'm trying to use some chat Event (afterMaximize to try and increase this height dynamically to be able to see the button).

 embedded_svc.addEventHandler("afterMaximize", function(data) {
                    console.log("afterMaximize event was fired.",document.getElementsByName('vfFrameId_1652794789149') );
                   
                });

But still i can't find how to target the iframe parent. Even document.getElementsByTagName("iframe") doest get me the parent iframe of document enter image description here

Thank you for your help

2 Answers 2

0

It appears as if your CSS is being applied to the iFrame and not to just your button. We cannot see all of your solution so it is difficult to be specific - but you need to avoid setting the z-index of the iFrame such that it overlays content on the page and intercepts clicks.

2
  • Hello, Thank you for your response. I tried to add the z-index css on the button instead of the Iframe and it does not work the buttton gets hidden : .embeddedServiceHelpButton .helpButton .uiButton{ z-index:999 !important; position:fixed; right: 0; bottom: 0; } May 17, 2022 at 8:43
  • As per VF code its only the generated embedded chat code of Salesforce May 17, 2022 at 8:48
0

SOLUTION

I used event AfterMaximize and AfterMinimize from chat event notifications , got the parent Iframe and then changed the height. This is an none elaborated example just to show :

embedded_svc.addEventHandler("afterMaximize", function(data) {
                        var iframe = parent.document.getElementsByTagName('iframe')[0];
                        iframe.height = '550px';
                    });

https://developer.salesforce.com/docs/atlas.en-us.snapins_web_dev.meta/snapins_web_dev/snapins_web_chat_events.htm

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .