Step 1: Install the Plugin 1. Go to the Bubble Plugin Marketplace.
2. Search for "Bubble Translation Plugin."
3. Click "Install" to add the plugin to your Bubble app.

Step 2: Add an Element to Your Page
- Translator Widget: Drag and drop the Translator Widget element onto your page.
- Native Translate Element: Drag the Native Translate Element if you prefer building a custom UI.

Step 3: Configure Plugin Settings

    For the Translator Widget:
  - Choose its position on the page (e.g., top-left, bottom-right).
  - Select dropdown direction (upwards or downwards).
  - Customize light or dark mode.
  - Add or remove languages from the dropdown.
  - Exclude elements from translation by specifying their IDs.

    For the Native Translate Element:
  - Create your UI and trigger translations through workflows.
  - Exclude elements as needed.

Step 4: Add Workflow Actions (Optional)
- Use the onTranslation event to trigger actions when a language is translated.
- Access the exposed states (language name and code) to perform custom actions.

---

How to Use the Translator Widget

Adding the Widget

1. Drag and drop the Translator Widget onto your page.
2. In the properties panel, configure the following:

• Position: Choose the corner where the widget will appear.
  
• Dropdown Direction: Select whether the dropdown opens up or down.
  
• Theme: Set to light or dark mode.
  
• Flags: Enable or disable flags next to language names.
  

Customizing the Language List
1. Go to the "Language Filter" section in the properties panel.
2. Add the languages you want to display in the dropdown.

Excluding Elements from Translation
1. Locate the "Exclude Elements" section.
2. Enter the IDs of the elements you want to exclude. For example:
  - header-logo
  - footer-text

---

How to Use the Native Translate Element

Setting Up the Native Element
1. Drag and drop the Native Translate Element onto your page.
2. Use workflows to trigger translation actions. For example:
  - On a button click, trigger an action to translate the app into a specific language.

Excluding Elements
1. Same as the Translator Widget, enter the IDs of the elements you want to exclude in the properties panel.

---

Workflow Integration

Using the OnTranslation Event
1. Go to the workflow editor.
2. Add the "onTranslation" event.
3. Use this event to perform actions, such as:
  - Show a popup or alert.
  - Update a database entry with the selected language.

Accessing Exposed States
The plugin provides two exposed states:
- Language Name: The full name of the selected language (e.g., "French").
- Language Code: The language code (e.g., "fr").

Use these states in workflows to customize your app’s behavior further.