<h2>CSS Customization</h2><p>This is intended for web developers who wish to have deep granular control of the Cobrowse UI elements that appear during a Cobrowse session. Here we provide css selectors for elements which will allow you to apply custom styles by targeting elements using at least two classes per element to ensure that css cascading rules prefer your custom styles.&nbsp;</p><h3>Streaming Border</h3><p>This is the red border which appears around the viewport to indicate to the user that the current page is being shared. It is generated by using an inset box-shadow.&nbsp;</p><p></p><pre><code class="language-css">/* example of customization */
.cb-streaming-border.cb-streaming-border--custom {
    box-shadow: inset 0px 0px 0px 5px teal;
    -webkit-box-shadow: inset 0px 0px 0px 5px teal;
    -moz-box-shadow: inset 0px 0px 0px 5px teal;
}</code></pre><h3>Cobrowse Buttons classes</h3><p>Cobrowse uses certain helper classes for all of the buttons in Cobrowse modals and elements. You can write custom styles using the following selectors. cbbtn and cbmodal-button are responsible for size and shape and the primary, secondary, and danger variations are responsible for color.</p><pre><code class="language-css">.cbbtn.cbbttn--custom
.cbmodal-button.cbmodal-button--custom
.cbbtn-primary.cbbtn-primary--custom
.cbbtn-secondary.cbbtn-secondary--custom
.cbbtn-danger.cbbtn-danger--custom
</code></pre><p><br></p><h3>End Button</h3><p>This element is appended to the page and is a floating element to assist the user to exit the session.<br></p><pre><code class="language-css">.cb-modal-session-end.cb-modal-session-end--custom
.cb-modal-session-end &gt; .cb-session-end__info.cb-session-end__info--custom
.cb-modal-session-end &gt; .cbbtn.cbbtn-danger.cbbtn--custom.cbbtn-danger--custom</code></pre><p><br></p><h3>Confidential Banner</h3><p>This element hovers over elements marked as PII to inform the end user that the element is confidential and not shared with the assisting agent.&nbsp;</p><p></p><pre><code class="language-css">.cb-confidential-banner.cb-confidential-banner--custom</code></pre><h3>Permission Modal</h3><p>Cobrowse uses this modal to query the end user if they will permit the assisting agent various permissions to interact with the currently shared page.&nbsp;</p><p></p><pre><code class="language-css">#permissionCobrowseModal.cb-modal.cb-modal--custom
	div.cb-modal__overlay.cbmodal__overlay--custom
		div.cb-modal__container.cbmodal__container--custom
			div.cb-modal__header.cb-modal__header--custom
                div.cb-modal__icon-holder.cb-modal__icon-holder--custom
			div.cbmodal-content.cbmodal-conent-no-border.cbmodal-content--custom.cbmodal-content-no-border--custom
			div.cb-modal-buttons.cb-modal-buttons--custom
				button#cbPermDenyButton.cbbtn.cbbtn-secondary.cbmodal-button.cbbtn--custom.cbbtn-secondary--custom.cbmodal-button--custom
                button#cbPermAcceptButton.cbbtn.cbbtn-primary.cbmodal-button.cbbtn--custom.cbbtn-primary--custom.cbmodal-button--custom</code></pre><p><br></p><h3>Pin Entry &amp; Session Start Modal</h3><p>This modal collects the pin from the user, as well as informs the user if they have entered an invalid pin, if the session is loading and if the pin has already been entered via a url it will offer to connect the user to the session without requiring the pin.</p><table style="min-width: 75px;"><tbody><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table><p></p><h3 style="text-align: left;"><strong>Captcha Behavior</strong></h3><p>If the user enters an incorrect pin 3 times within 3 minutes, they will be presented with a Captcha challenge. &nbsp;Then, they must submit the answer to the captcha, along with the correct pin, in order to connect.</p><p></p><pre><code class="language-css">#startCobrowseModal.cb-modal.cb-modal--custom
    .cb-modal__overlay.cb-modal__overlay--custom
        .cb-modal__container.cb-modal__container--custom
            .cb-modal__header.cb-modal__header--custom
                .cb-modal__icon-holder.cb-modal__icon-holder--custom
            div
                div.cbmodal-content.cbmodal-content-no-border.cbmodal-content--custom.cbmodal-content-no-border--custom
                    p.cb-modal__pin-instructions
                    div.cb-modal__wrong-pin.cb-modal__wrong-pin--custom
                    div.cb-modal__bad-captcha.cb-modal__bad-captcha--custom
                    input[type=number].cb-modal__session-pin.cb-modal__session-pin--custom
                div#cb-modal-auto-popup-content.cbmodal-content.cbmodal-conent-no-border.cbmodal-content--custom.cbmodal-content-no-border--custom
                div.cb-modal-captcha-content.cbmodal-captcha-content--custom
                    input[type=number].cb-modal__captcha-answer.cb-modal__captcha-answer--custom
                div.cb-modal__loading.cb-modal__loading--custom
                    div.cb-modal__loading-spinner.cb-modal__loading-spinner--custom

            div.cb-modal-buttons.cb-modal-buttons--custom
                button.cbbtn.cbbtn-secondary.cbmodal-button.cbbtn--custom.cbbtn-secondary--custom.cbmodal-button--custom
                button.cbbtn.cbbtn-primary.cbmodal-button.cbbtn--custom.cbbtn-primary--custom.cbmodal-button--custom

            div.cb-modal__pin-warning.cb-modal__pin-warning--custom
                img
                p

            div.cb-modal__pin-footer.cb-modal__pin-footer--custom
                p</code></pre><p><br></p><h3>File Transfer Modal</h3><p>This modal allows the agent or user to send or receive files.</p><p></p><pre><code class="language-css">#fileTransferCobrowseModal.cb-modal.cb-modal--custom
	div.cb-modal__overlay.cb-modal__overlay--custom
		div.cb-modal__container.cb-modal__container--custom
			div.cb-modal__file-transfer.cb-modal__file-transfer--custom
				header.cb-modal__ft-header.cb-modal__ft-header--custom
          div.cb-modal__ft-icon cb-modal__ft-icon--custom
          div
            button.cb-modal__ft-exit-btn.cb-modal__ft-exit-btn--custom

			div.cbmodal-content.cbmodal-content--custom
				div.cb-modal__file-manager.cb-modal__file-manager--custom
					div.cb-modal__file-explorer cb-modal__file-explorer--custom
            button.cbbtn.cbbtn-upload.cbbtn--custom.cbbtn-upload--custom
              div.cb-modal__upload-icon cb-modal__upload-icon--custom

						table.cb-modal__ft-table.cb-modal__ft-table--custom
              div.cb-modal__download-icon.cb-modal__download-icon--custom

				div.cb-modal__uploading.cb-modal__uploading--custom
					div.cb-modal__uploadingprogress.modal__uploadingprogress--custom
					button.cbbtn.cbbtn-danger.cbbtn--custom.cbbtn-danger--custom</code></pre><h3>Default Styles</h3><pre><code class="language-css">.cb-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000002;
  overflow: hidden;
  outline: 0;
  box-sizing: border-box;
}

.cb-modal.is-open {
  display: -ms-flexbox;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  height: 100%;
  width: auto;
  margin: 0.5rem;
}

.cb-modal__header {
  width: 100%;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e9ecef;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 0px 15px 0px;
  box-sizing: border-box;
}

.cb-modal-session-end {
  position: fixed;
  bottom: 3vh;
  left: 1vw;
  z-index: 100000002;
  background: #302f2f;
  color: white;
  border-radius: 0.25rem;
  display: -ms-flexbox;
  display: flex;
  font-weight: 400;
  font-size: 15pt;
  line-height: 1.5;
  padding: 6px;
  text-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  vertical-align: text-bottom;
}

.cb-end-session__info {
  margin: 0px 10px 0px 0px;
  word-wrap: 'break-word';
}

.cb-modal__icon-holder {
  height: 75px;
  width: 75px;
  background-image: url('https://cobrowse.screenmeet.com/support_icon_person.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-modal__loading {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.cb-modal__wrong-pin {
  color: red !important;
  font-size: 10pt;
  margin-bottom: 10px;
}

.cb-modal--hidden {
  display: none !important;
}

.cb-modal--invisible {
  visibility: hidden;
}

.cbmodal-session-confidmsg {
  position: fixed;
  bottom: 7vh;
  left: 1vw;
  z-index: 100000002;
  background: #84d375;
  color: white;
  opacity: 0.3;
  border-radius: 0.25rem;
  display: -ms-flexbox;
  display: flex;
  font-weight: 400;
  font-size: 10pt;
  line-height: 1.5;
  padding: 6px;
  text-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  vertical-align: text-bottom;
}

.cb-modal__session-pin {
  width: fit-content;
  height: 40px;
  border: 1px solid lightgray;
  border-radius: 0.5rem;
  font-size: 15pt !important;
}

.cbmodal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  font-size: 15pt;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  padding: 10px 30px 10px 30px;
  box-sizing: border-box;
  text-align: center;
}

.cb-modal__container {
  background-color: #fff;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.cb-modal__footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: space-evenly;
  padding: 15px;
  box-sizing: border-box;
}

.cb-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.cbbtn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 15pt;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.cbbtn:hover,
.cbbtn:focus {
  text-decoration: none;
}

.cbbtn:focus,
.cbbtn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.cbbtn-primary {
  color: #fff !important;
  background: #007bff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.cbbtn-upload {
  color: white !important;
  background: #2a97f1 !important;
  background-color: #2a97f1 !important;
  border-color: #2a97f1 !important;
}

.cbbtn-upload:hover {
  background: #0e65ad !important;
  background-color: #0e65ad !important;
}

.cbbtn-danger {
  color: #fff !important;
  background: #f0491b !important;
  background-color: #f0491b !important;
  border: #f0491b !important;
  border-color: #f0491b !important;
  padding: 0.375rem 2rem;
}

.cbbtn-danger.focus,
.cbbtn-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.cbbtn-primary:hover {
  color: #fff !important;
  background: #0069d9 !important;
  background-color: #0069d9 !important;
  border-color: #0062cc !important;
}

.cbbtn-primary:focus,
.cbbtn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.cbbtn-secondary {
  color: #fff !important;
  background: #6c757d !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.cbbtn-secondary:hover {
  color: #fff !important;
  background: #5a6268 !important;
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
}

.cbbtn-secondary:focus,
.cbbtn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.cb-streaming-border {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 5px 5px red;
  -webkit-box-shadow: inset 0px 0px 5px 5px red;
  -moz-box-shadow: inset 0px 0px 5px 5px red;
  z-index: 2147483647;
}

.cb-laser-pointer {
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 32001;
  background-color: red;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0.6;
}

.cb-confidential-banner {
  width: 100px;
  height: 20px;
  position: absolute;
  z-index: 100000000;
  background-color: rgb(14, 184, 223);
  color: black;
  border-radius: 10px;
  pointer-events: none;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 10pt;
  opacity: 1;
}

.cb-laser-flare {
  animation-name: laser-flare;
  animation-duration: 0.25s;
  animation-timing-function: linear;
}

@keyframes laser-flare {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(1.5);
  }
  75% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(2);
    opacity: 0.8;
    background-color: rgb(177, 0, 0);
  }
}

.cb-modal__loading-spinner {
  height: 80px;
  width: 80px;
  background-image: url('https://cobrowse.screenmeet.com/loading_spiner.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-circular-loader {
  animation: loading-spinner infinite 1s linear;
}

@keyframes loading-spinner {
  from {
    transform: rotate(0deg);
    transform-origin: 50% 50% 0;
  }
  to {
    transform: rotate(360deg);
    transform-origin: 50% 50% 0;
  }
}

.cb-modal__file-transfer {
  width: 500px;
  height: 500px;
  border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cb-modal__file-manager {
  width: 100%;
}

.cb-modal__ft-table {
  width: 100%;
  margin-top: 20px;
  text-align: left;
  border-collapse: separate;
}

.cb-modal__ft-table thead {
  font-weight: bold;
}

.cb-modal__ft-table tbody {
  font-size: 12px;
  color: #4a4a4a;
}

.cb-modal__ft-table a {
  color: #0066cc;
}

.cb-modal__ft-exit-btn {
  border-radius: 15px;
  width: 20px;
  height: 20px;
  color: black;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.cb-modal__ft-icon {
  height: 32px;
  width: 32px;
  margin: 0px 10px 0px 10px;
  background-image: url('https://cobrowse.screenmeet.com/icons/icon-window-files.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-modal__upload-icon {
  height: 24px;
  width: 24px;
  background-image: url('https://cobrowse.screenmeet.com/icons/icon-upload-white.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-modal__download-icon {
  height: 24px;
  width: 24px;
  background-image: url('https://cobrowse.screenmeet.com/icons/icon-download-grey.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-modal__file-transfer th {
  text-align: left;
  font-size: 12px;
  color: #2a97f1;
  border-bottom: #d8d8d8 1px solid;
  padding-bottom: 10px;
}

.cb-modal__ft-header {
  background-color: #334759;
  color: white;
  display: -ms-flexbox;
  display: flex;
  justify-content: left;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 14px;
  font-weight: bold;
}

.cb-modal__uploading {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 23%;
  justify-content: space-between;
}

.cbmodal-content-no-border {
  color: black;
  border: none !important;
}

.cb-modal-button {
  border-radius: 0.5rem !important;
  width: 125px;
  cursor: pointer;
}

.cb-modal-buttons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-evenly;
  padding: 15px;
}

.cb-modal__pin-footer {
  font-size: 11px;
  color: gray;
  text-align: center;
}

.cb-modal__pin-warning {
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.cbmodal__pin-warning &gt; p {
  margin-left: 10px;
}

#modal-2-content {
  text-align: center;
  padding: 0 !important;
}

#file-transfer-cobrowse {
  margin-left: auto;
  margin-right: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
</code></pre>

CSS customization

Advanced CSS customization

Getting Application from ServiceNow Store

Using your Azure Blob for ScreenMeet File Storage

Minimal Cobrowse Script

Frequently Asked Questions

Timeout Settings

July

Remote Control

IP Access Control Feature

Live Release Notes Q2 2024

Video Chat Integration

Cobrowse Settings

CoBrowse Release Notes Q2 23

Connecting to Mac devices

Connecting to a Device Using Beam

Windows Tools

Starting a session

CoBrowse Release Notes Q1 22

Remote Support Release Notes Q4 24

Clipboard

Release Summer 21 (1.14)

Virtual Agent Integration w/ ScreenMeet

Android SDK Quickstart

Security

Remote Support Release Notes Q3 23

Replay Settings

Custom Copy

CoBrowse Deployments

AI Summary History

Integration Signing Key

Microsoft D365 Release Notes Q4 2022

Replay Release Notes Q2 24

October

Live Settings

ScreenMeet Console Customers

Hosting a Desktop Session

Remote Support Release Notes Q2 23

Creating a Replay Recording

AI Assist Overview

Included Reports and how to add them into Dashboards

Custom Domain

Networking Configuration

AI Summarization

Remote Support

Overview

Remote Support Settings

CoBrowse Release Notes Q2 24

Sign in to console.screenmeet.com

Multiple Domain and Subdomain support

February

File Transfer Settings

Exporting ScreenMeet + Salesforce data to third party visualization tools

Beam Release Notes Q1 24

Regional Geo-Fencing

Custom Branding

AI Assist

Configure API service

Beam Release Notes Q3 23

Joining & Completing a Live Plus session

Egress IP Addresses

Custom URL

Starting a Session from within Salesforce

Settings and Policies

Requirements

How To Install ScreenMeet in Your Genesys Instance

Localization

Configuring Environment Variables

Reviewing a Session

August

Remote Support Release Notes Q1 23

Live Release Notes Q2 22

Release Summer 2020 (1.9)

Device Requirements

System Information

Create Multiple Sessions

ServiceNow Release Notes Q4 24

403 Forbidden while making API request

Manage Beam Group Permission Set

ScreenMeet Platform Release Notes Q3 23

Remote Support Release Notes - Q1 22

Screen Annotation

Creating a Session

Custom Background

Remote Support Release Notes Q2 24

AI Summary Studio

Instructions to Person at End Point Device

Beam Client: Installation, Deployment, and Configuration Guide

Beam Groups: Setup, Settings, and Access Management

Component settings

Customer initiated sessions with a chatbot

ScreenMeet 2024 Release Notes

Package Installation Error - Case-Case Layout: feedLayout is not supported for this layout

Developer Notes (3.0.11)

Starting a Session from Dynamics

ScreenMeet Platform Release Notes Q1 23

Remote Support Release Notes Q2 22