Available parameters

It is possible to customize the behavior of the solution according to the descriptions below:

To change the default behaviors, simply add the ? character at the end of the script call and the desired parameters and values in the rybena.js script call

Example of script call:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?parametro1=valor1&parametro2=valor2"></script>

Below are the parameters that can be used to customize the Rybená tool

Rybená's position

This option allows you to choose whether the Player will open to the right or left of the page.

positionPlayer: left → Positions the Player on the left side of the page.

positionPlayer: right → Positions the Player on the right side of the page.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayer=left"></script>

Default value: left

Rybená's position

This option allows you to choose whether the Player will open to the right or left of the page on mobile devices.

positionPlayerMobile: left → Positions the Player on the left side of the page.

positionPlayerMobile: right → Positions the Player on the right side of the page.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayerMobile=left"></script>

Default value: left

Accessibility Bar Position

This option allows you to choose whether the accessibility bar will open to the right or left of the page.

ATTENTION

This customization only works when there is no Custom Accessibility Bar

positionBar: left → Positions the bar on the left side of the page.

positionBar: right → Positions the bar on the right side of the page.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayer=left&positionBar=right"></script>

Default value: left

Accessibility Bar Position (Vertical)

This option allows you to choose the desired vertical position of the accessibility bar

ATTENTION

This customization only works when there is no Custom Accessibility Bar

offsetTopBar: Value that determines the distance between the accessibility bar and the top of the page → Positions the bar on the page according to the assigned value (Ex: 40%, 100px, 12rem, 30vh).

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?offsetTopBar=30vh"></script>

Default value: 40%

Accessibility Bar Color

This option allows you to choose the color of the accessibility bar

ATTENTION

This customization only works when there is no Custom Accessibility Bar

backgroundColorBar: Value that determines the color of the accessibility bar → Changes the color of the accessibility bar.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?backgroundColorBar=#316181"></script>

Default value: #316181

Accessibility bar rendering time

This option allows you to choose the rendering time for the accessibility bar.

renderTimeout: value → Changes the rendering time of the accessibility bar.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?renderTimeout=300"></script>

Default value: 0

Recommended value: 300

Position of Rybená on the Page Axis

This option allows you to change the vertical or horizontal position of the Player on the page.

offsetX: value → Changes the position on the X (Horizontal) axis of Player Rybená.

offsetY: value → Changes the position on the Y (Vertical) axis of Player Rybená.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?offsetX=60&offsetY=60"></script>

Default value: 60

Size of Rybená

This option allows you to choose the size of the Player.

size: value → Changes the size of the Rybená player.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?size=280"></script>

Default value: 280

Accessibility bar stack order

This option allows you to change the stack order (z axis) of Rybená's buttons if there is a conflict with other elements on the page

zIndexBar: value → Changes the z-index of the page's accessibility bar.

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?zIndexBar=100"></script>

Custom accessibility bar

To use a custom bar, insert the following classes into the desired elements, be they buttons (button tag) or links (a tag).

The classes are:

  • btn-rybena-sign-language for Libras
  • btn-rybena-voice for Voice
  • btn-rybena-visual for + Accessibility

The buttons must be inside a div, whose id must be custom-rybena-div

Example:

<div id="custom-rybena-div">
     <img alt="" src="" class="btn-rybena-sign-language" />
     <img alt="" src="" class="btn-rybena-voice" />
     <img alt="" src="" class="btn-rybena-vision" />
</div>

ONLY USE THESE SETTINGS IF NECESSARY

Advanced settings modify the player's behavior so that it needs to be used with api for the optimal functioning. If you use such parameters without implementing API integration, users will not have satisfactory usability

API Mode

This option automates several functions to use Rybená via API

These automations include :

  • Opening of Rybená in background
  • Removal of Rybená's presentation texts

mode: api → Automates some features for API-facilitated integration mode: full → Rybená's default behavior

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"></script>

Default value: full

Initialize in another language

This option changes the startup language of the Rybená solution

lang: ptBR → Initializes the solution in Portuguese lang: esES → Initialize the solution in Spanish lang: enUS → Initializes the solution in English

Example:

<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"></script>

Default value: ptBR

ATTENTION

Only the Portuguese language contains the LIBRAS translation functionality

Last Updated: