Docs
Documentation
Everything you need to install and configure Nebulang.
Installation by Platform
No code
In Framer, Nebulang is available as a native component. Just drag and drop the widget directly into your project:
- Open your project in Framer
- In the sidebar, search for "Nebulang" in the community components
- Drag the widget anywhere in your layout
- Configure languages, colors, and position directly in the properties panel
No code configuration is needed — all options are visual.
Configuration Attributes
The widget accepts dozens of attributes for full customization. All are optional (default values are applied automatically).
General
| Attribute | Default | Description |
|---|---|---|
| available-languages | (all) | Available languages (empty = all) |
| selected-language | original | Initially selected language |
| label-original | English | Label for the original language |
| language-label | local | Display local or native language name |
| translate-title | true | Translate the page title |
Button Appearance
| Attribute | Default | Description |
|---|---|---|
| background-color | #fff | Button background color |
| text-color | #111 | Button text color |
| border-radius | 12 | Border radius (in px) |
| border-color | — | Border color |
| border-width | 1 | Border width (in px) |
| shadow | — | Button CSS shadow |
| icon-mode | flag | Icon mode (flag, icon, none) |
| icon-size | 18 | Icon size (in px) |
| flag-radius | 999 | Flag radius (999 = circular) |
| show-label | false | Show language label on button |
| show-arrow | false | Show indicator arrow |
Dropdown
| Attribute | Default | Description |
|---|---|---|
| dropdown-background-color | #fff | Dropdown background color |
| dropdown-text-color | #111 | Dropdown text color |
| dropdown-border-color | — | Dropdown border color |
| dropdown-icon-mode | flag | Icon mode in dropdown |
| show-searchbar | true | Show search bar in dropdown |
| list-height | 280 | Maximum list height (in px) |
| animation-time | 200 | Animation duration (in ms) |
Typography
| Attribute | Default | Description |
|---|---|---|
| font-family | system | Font family |
| font-size | 14px | Font size |
| font-weight | 500 | Font weight |
Complete Example
An example with all the main options configured:
<script src="https://cdn.nebulapps.com.br/nebulang.js" async></script>
<nebulang-widget
available-languages="en,es,fr,de,pt,ja,ko,zh"
selected-language="original"
label-original="English"
language-label="local"
translate-title="true"
background-color="#ffffff"
text-color="#1a1a1a"
border-radius="12"
border-width="1"
icon-mode="flag"
icon-size="18"
flag-radius="999"
show-label="true"
show-arrow="false"
show-searchbar="true"
dropdown-background-color="#ffffff"
dropdown-text-color="#1a1a1a"
animation-time="200"
list-height="280"
></nebulang-widget>Excluding Elements from Translation
To prevent certain elements from being translated, add the notranslate class and the translate="no" attribute:
<span class="notranslate" translate="no">Nebulang</span>This is ideal for brand names, codes, and content that shouldn't be changed.