BabelShark Knowledge Base
  • Introduction
  • BabelShark basics
    • Getting started
    • Project modes
    • Project languages
    • Code snippets
    • Source string markup
    • Setting visitor's language
    • Project associated texts
  • Setup
    • Recommended approach
    • Coexistence with other translators
    • Scopes
    • Performance
  • FAQ
  • Site owner's manual
    • Introduction
    • Real-time language statistics
    • Working in a team
  • Developer's manual
    • Embed BabelShark script
    • API Reference
      • BabelShark config
      • Language drop-down specs
    • HTML markup
      • Variables
      • Issues
    • Integrations
      • Tilda Publishing
        • Tilda website setup
        • Elements to localize
  • Manager's manual
    • Introduction
    • Community proofreaders
  • Proofreader's manual
    • Introduction
    • How to proofread
    • Checking translations
    • Translation types
    • Request of re-checks
Powered by GitBook
On this page
  1. Developer's manual
  2. API Reference

Language drop-down specs

To embed an automatic language drop-down to your page use the following HTML element:

<span 
    class="bs-activator" 
    [data-drop="auto|right|left|right-top|left-top"]
    [data-theme="light|dark"]
    [data-css="https://...."]
    [data-dialog-style="...."]
    ></span>

The minimal code snippet is <span class="bs-activator"></span>.

Configuration attributes

class

"bs-activator"

To adjust the language selector button, use this class in your css.

data-drop

The direction to open the language drop-down:

  • auto - automatically select the direction

  • right - drop down to the right and below the language selector

  • left - drop down to the left and below

  • right-top - open to the right and over the language selector

  • left-top - open to the left and over the language selector

data-theme

Overall coloring theme of the widget and its activator:

  • light (default) - light background, dark text

  • dark - dark background, light text

data-css

Embed the speficic CSS file in to the drop-down iframe.

data-dialog-style

CSS inline styles for widget dialog (iframe). Useful to set z-index and similar properties.

Note: data-drop attribute controls widget position.

PreviousBabelShark configNextHTML markup

Last updated 1 year ago