Overview

With the Theme editor you can customize the appearance of your video chat space to match the look and feel of the web page you are embedding it on.

You can access the theme editor from the Manage Space panel, under the Theme option. From there you can access options for the Video Style, and the Embedded Button style, if you used the Button Embed option. Additionally, depending on your subscription, you may have the option to enter Custom CSS.

theme-options

Video Style

With the Video Style you can adjust the colors, font, and corner styles of the video chat window.

video-styles1

For color options you can click on the color swatch to select a color, or you can enter a 6 digit hex (e.g. #FF0000) value. These color options include:

  • Background Color - The color of the entire video background.
  • Modal Color - The color of panels that can appear over the background, such as the Participants panel or the Settings panel.
  • Body Text - The primary text color. This should contrast well with the Background color.
  • Meta Text - The secondary text color, such as subtext and field labels. This is often lighter in color than the Body Text.
  • Button Color - The background color of standard buttons in the video.
  • Button Text - The text color of standard buttons. This should contrast well with the Button Color.
  • Accent Color - The color of action buttons and various accents in the video. Your brand color is often used here.
  • Accent Text - The text color of accent buttons. This should contrast the Accent Color well.
  • Field Background - The color of all text fields.
  • Field Text - The color of text within text fields. *Does not affect labels.
  • Field Border - The outline color around text fields.
  • Control Icons - The color of icons that appear in the control bar. This should contract well with the Background Color.

Font Family

You can also pick from a variety of preselected fonts. However, if you cannot find your usual font in this list, we recommend picking the closest one possible. Or if your subscription allows Custom CSS, you can import your font there.

Square Corners

By default all video elements, buttons, fields, and most miscellaneous objects have preset rounded corners in the chat. By enabling Square Corners, it will override all the rounded corners.

Zipcan Branding

The Zipcan logo and byline on the lobby page are mandatory on the video chat space for free and entry-level subscriptions. It is visible when the video chat space is embedded or used directly.

Note: Zipcan branding is omitted from the video when viewing the chat space from the Admin Console.

The Zipcan branding can be hidden for Business and Enterprise level subscriptions. If you have one of these subscriptions, you will see a Hide Zipcan Branding option in the Video Style panel. When enabling, the Zipcan logo and byline will be hidden from the video chat space.

Saving Changes

Any time a change is made in the Video Style or Embedded Button panels, you will see the preview update with your selection at real-time. These changes will be temporarily saved while you are theming. However, changes will be lost if you close out of the Chat Space altogether. Changes are not made live until you click "Publish".

Publishing

Upon making changes you will be asked if you want to publish them or discard them. Clicking Publish will make your changes live for everyone who has access to the embedded video or direct video link.

Note: Changes will not be visible to users until the next page load of the video.

When changes are discarded, every change made since the previous publish will be undone, and the preview will update.

video-styles2

Embeddable Button

When embedding a chat space using the Button Embed option, a floating button will appear  on the page when loaded, and when clicked, the video opens in a popup window.

This button can be themed independently of the video and can appear in all shapes and sizes to fit your page.

Any change made to the Embeddable Button theme will require you to publish in order for the changes to be made live.

button-embed1

Button Style

By default, the button uses the standard Zipcan appearance; an oblong shape with an icon and text. However, all these attributes can be changed.

You can type any phrase you want for the text of the button, and you will see this update in the preview. Additionally, you can select a different background and text color of your button.

Note: If you enter text in the button, it will use the same font you set in the Video Style.

The icon and text in the button can be enabled/disabled independently. For example, you can have a button with only an icon, or a button with only text. Click the switch to disable either of these.

Icon, Image, or SVG

There are three different options available to include imagery in the button. By default, we use a webcam icon preset. To change to a different icon preset, simply select a different icon in the dropdown.

Note: The text color you choose will be used for the icon color as well.

icon-option1You can also upload an image in place of the preset icon. To do this, select the "Upload" option in the segment selector. You will see a button appear, which will let you select an image from your system to upload. This image can be a custom icon, or an avatar, for example.

Note: The image will upload to a maximum of 100px wide and will maintain its aspect ratio.

icon-option2

Lastly, if you prefer to include more complex vector imagery, you can select the "SVG" option in the segment selector. When selected, a text box will appear where you can paste in any SVG code.

Note: We do not interfere with the sizing or color of the SVG graphic. Those attributes will need to be defined in the SVG code.

icon-option3

Button Shape and Size

The size of the button is largely dictated by the content; the icon/image/SVG and text. However, we also allow you to adjust the border radius and padding for fine tune the shape and size of the button.

The button can be adjusted to any border radius you choose. These values are entered separately for each corner of the button. From left to right, the values are for top-left, top-right, bottom-right, bottom-left.

Additionally, you can set the padding for the button. The values are also entered separately starting with top, right, bottom, left.

button-size

As you adjust these values you will see them update in the preview above.

Button Position

The button can appear in two different positions on screen: lower right (default) or lower left. When changing the position of the button you'll also noticed the preview for the Popup Appearance options will update with your button position selection.

Therefore, when the button is on the right, the video popup will open on the right. When the button is on the left, it will open on the left.

button-pos1

button-pos2

Additionally, the distance that this button can appear from the corner of the screen can be adjusted by selecting one of the preset values in the Distance dropdown. 

Popup Appearance

There are three different appearances for the video popup window, all of which are affixed over the content:

  • Popup (Default) - Appears affixed to the lower right or left on the page, depending on the button position.
  • Drawer - Appears from the right or left using the full height of the screen. This is best if there are only one or two other participants on the call.
  • Modal - Appears in the middle of the screen over the content.

Note: There is no live preview for the Popup Appearance selection when theming the video, aside from the graphic preview in the button. To get a live preview, you will need to visit the embed location.

When the chat space is embedded, all options have the ability to enlarge to a full screen view and minimize to a thumbnail.
Custom CSS

If your subscription includes the Custom CSS option in Theming, you should see this option below the Embeddable Button option.

With this option you can paste in any CSS to modify the appearance of the video.

custom-css

Note: This will not affect the appearance of the button - only the video itself.

We recommend writing the CSS in your preferred text editor, then copy and pasting the styles into the Custom CSS field.

When styles are entered, you will need to click "Save and Preview" to see the styles update in the video preview on the left.

However, when saved, the changes are not made public. Since this is a theme change, you will need to publish the changes.

Theme Presets

Each chat space has a default theme preset, which uses the standard Zipcan theme. However, you can choose to change the default theme, or create a new version.

Any time you make changes in the theme options, it will be applied to the currently selected theme preset, shown by a blue outline. If there are changes, they will be denoted and you will need to publish them for them to be live.

preset5bFrom the preset list, you can reset the theme to the default Zipcan theme, discard any unpublished changes, or publish current changes. You can access these options from the ellipses "..." menu.

New Preset

To create a new Theme Preset, enter a title in the "Name this Preset" field, and click Save. This will create a version of the current theme, along with any unpublished changes you have made.

preset7Creating a new preset does not automatically change which one is used for the chat space. To change the preset, click the ellipses "..." button and select "Use this Theme". This will automatically apply the theme to the chat space and publish it.

Delete Preset

To delete a preset it cannot be the one currently used for the video chat space. If it is, you'll need to switch to a different theme first. Then, you can use the "Delete" option from the "..." menu.