On iframe load callback [jQuery] [JS]

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Web Chat: Full-featured bundle</title>
    <style>
        html, body {
            height: 100%
        }
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: right;
}
        body {
            margin: 0
        }

        #webchat1,
        #webchat1 > * {
            height: 100%;
            width: 100%;
			
			
        }
        .chatimg:hover{box-shadow: 0px 0px 15px 7px #7dc6fb;}

        @keyframes HideMe {
            to {
                transform: translateY(100%);
                visibility:hidden;
            }
			}




     @keyframes ShowME {
            to {
        visibility:visible;
        transform: translateY(0%);
            }
}

		.IconCopy
		{
				display: inline-block;
				background-image: url(icon-copy.png);
				border-radius: 25px;
				height: 25px;
				width: 24px;
				background-size: contain;
		}
		.IconCopy:hover
		{
				background-image: url(icon-copyO.png);
		}

		.Questions{
			 width: 100%; height: 47px; text-align: right;

		}

		 .flexy {
        	display: block;
        	max-height: 484px;
        	overflow: auto;
        }
        
        /*iframe div
        {
        	text-align: right !important;
        	background-color: red !important;
        }*/
    </style>
</head>
<body>
<script>
    $(document).ready(function(){
        var botDiv = document.getElementById("botDiv");
        var closeDiv = document.getElementById("closeDiv");
        var chatDiv = document.getElementById("chatDiv");
        var HelpIco = document.getElementById("helpIco");
      ...