Captions Widget is a friendly way to embed our captions and translations into your event.
To customize your widget, go to the Event Widget Tab and click "Configure".
There are 3 different tabs on the Configure Widget page. Quickly go to the needed section in this article by clicking on the link provided below:
You can use the page color palette and change the widget width to realize approximate page appearance and set up your widget appropriately.
Settings
Toggle Captions Button - When turned on, the "Hide Captions" button is available for users.
By default the Captions Button is enabled.
Language Options Button - When turned on, the "Language" button is available for users
By default Languages Button is enabled.
Toggle Auto-Scroll Button - When turned on, the "Auto-Scroll On/Off" button is available for users
By default Auto-Scroll Button is disabled.
Popout Widget Button - When turned on, the "Popout" button is available for users
By default Auto-Scroll Button is disabled.
SyncWords Badge - Turn on SyncWords logo to be shown in the bottom right corner, you can select the level of its transparency.
Default Widget State - Select if the captions box will be hidden by default. Users will be able to turn it on/off anytime. You can turn it off only when Toggle Captions Button is enabled.
Captions in Full Screen - Show the widget UI when the video player goes full screen. Additional styling is required. See CSS documentation for details.
Custom CSS - CSS you add will override any applicable styles defined using the widget editor controls. Custom CSS is not validated for errors.
Captions Settings
Number of Lines - Select the value from 1 to 5 to set the number of lines that will be displayed in the widget.
Font - Select the font you want the captions text to be displayed in.
You can also add a font by providing its name from the Google library.
Font Size - Set up the font size from 12 to 24.
Font Color - Customize the font color of the captions text. You can enter an RGB, HSL, or HEX value. To change the color code, click the button under the color code field.
Background color - Customize the widget background color. You can enter an RGB, HSL, or HEX value. To change the color code, click the button under the color code field.
Padding X - Set up the padding between the text and the widget border along the X axis.
Padding Y - Set up the padding between the text and the widget border along the Y axis.
Corner radius - Set up the roundness of the widget corner.
Border - Select the width of the widget border.
Border color - Adjust the widget border color.
Buttons
Button Label - You can change the appearance of buttons under the widget by selecting either text or icons.
Label Size - You can change the size of text or icons.
Label Color - You can select the color of text or icons in the buttons.
Background color - Set up the background color of buttons under your widget.
Padding X - Set up the padding between the text/icons and the button border along the X axis.
Padding Y - Set up the padding between the text/icons and the button border along the Y axis.
Corner Radius - Set up the corner radius of the buttons.
Border - You can change the width of the buttons' border.
Border Color - Change the buttons' border color.