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

[Ed_]

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).

[AndrewTurner · Accepted solution]

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>