Zoom Integration with CSS

Here is a display example of the Zoom Integration with CSS code added to spruce it up:



Here are the instructions to make the rounded box and the CSS Code to create this visual eye candy:

  1. Copy the code in the yellow box below.
  2. On your website, go to "Themes" in the dark gray bar on the left side of the screen.
  3. In themes, locate the "Edit Custom CSS" link just below the white "Preview & Customize" button.
  4. Scroll to the bottom of any (and all) existing CSS Code and start a new line by pressing enter.
  5. Paste in the copied code and press the blue "Save" button
    Call 877-518-0819 if you have any issues.

Here is the code to Copy:

/* START Custom Zoom Intigration CSS */
@import url(',700,900&display=swap');
.media__zoom {
	position: relative;
	height: 100%;
  font-family: 'Montserrat', sans-serif;
	border-radius: 25px;
	width: 300px;
	-webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
	        box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2);
	-webkit-transition: -webkit-transform 300ms ease;
	transition: -webkit-transform 300ms ease;
	-o-transition: transform 300ms ease;
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
	-webkit-transform: translateZ(0) scale(1.02) perspective(1000px);
	        transform: translateZ(0) scale(1.02) perspective(1000px);
	float: left;
  background: rgb(114,237,242);
  background: linear-gradient(135deg, rgba(114,237,242,1) 10%, rgba(81,81,229,1) 90%);
	border-radius: 25px;
	opacity: 0.8;
  padding: 10px;
  margin-left: 10px;
.media__zoom:hover {
	-webkit-transform: scale(1) perspective(1400px) rotateY(10deg);
	        transform: scale(1) perspective(1400px) rotateY(10deg);
.media__zoom--meeting_id {
    margin-bottom: 7px !important;
.media__zoom--when {
    margin-bottom: 0px !important;
.media__zoom--duration {
    margin-bottom: 5px !important;
.media__zoom--join::before {
  content: "Click to  ";
/* END Custom Zoom Intigration CSS */