Select to view content in your preferred language

Make iframe talk to a text card to have a custom layout for a iframe

653
1
Jump to solution
10-16-2023 07:03 AM
Ed_
by MVP Regular Contributor
MVP Regular Contributor

Hello and happy Monday,

 

I am trying to connect a iframe (that contains a chatbot URL) to a text box to make custom layout for the chatbot popup on a HUB site. I followed the steps below but the iframe and text box are not talking to one another. How can I fix this?

 

  •  Add a row to the Hub site and set Row CSS Class​ to chatframe​ 
  • Then add a iframe to the row and include the chatbot URL in the iframe.
  • Add text card in the row and click Edit in HTML​ mode add the code below and click Apply​
.chatframe iframe { width: 500px; height:100%; background: none; border: 0px; bottom: 0px; float: none; margin: 0px; padding: 0px; position: fixed; right: 0px; z-index: 999; }​
 
 
  • Save and preview the Hub site
As you can see below, the chatbot is still not appearing as intended (should be at bottom right of the screen).
 
SaadullahBaloch_0-1697464958616.png

 

Question | Analyze | Visualize
1 Solution

Accepted Solutions
AndrewTurner
Esri Contributor

Thanks for asking this question. To fix the issue you need to include Style tags around the HTML code. This will then apply the CSS to this page, including the iFrame card. 

 

 

<style>
.chatframe iframe { 
   width: 500px; 
   height: 100%; 
   background: none; 
   border: 0px; 
   bottom: 0px; 
   float: none; 
   margin: 0px; 
   padding: 0px; 
   position: fixed; 
   right: 0px; 
   z-index: 999; 
}​
</style>

 

 

 

View solution in original post

1 Reply
AndrewTurner
Esri Contributor

Thanks for asking this question. To fix the issue you need to include Style tags around the HTML code. This will then apply the CSS to this page, including the iFrame card. 

 

 

<style>
.chatframe iframe { 
   width: 500px; 
   height: 100%; 
   background: none; 
   border: 0px; 
   bottom: 0px; 
   float: none; 
   margin: 0px; 
   padding: 0px; 
   position: fixed; 
   right: 0px; 
   z-index: 999; 
}​
</style>