Demo to preview the plugin:
Live Demo: https://pluginrapidev11.bubbleapps.io/tweet
Introduction
Embed Tweets in your Bubble Application. you can define the theme, alignment, if conversations should be shown, if cards should be shown and more!
How to setup
- Add the Embed Tweet Element
- Go to the Design tab in the Bubble editor.
- Search for the Embed Tweet element provided by the plugin.
- Drag it onto your page where you want the tweet to be displayed.
- Configure the Embed Tweet Properties
- Id: The Tweet ID you want to embed (e.g.
1570422185642041347). - Theme: Choose between
"light"or"dark"to match your app's design. - Align: Align the tweet as
"left","center", or"right"on the page. - Do not Track: Enable this to opt out of tracking by Twitter.
- Cards (optional): Use
"hidden"to disable media preview cards in quote tweets. - Conversation (optional): Set to
"none"to hide the conversation thread when embedding a reply.
With the element selected, fill out the following fields in the Appearance tab:
To get the Tweet ID, copy the number at the end of a tweet URL.
Example:
https://twitter.com/user/status/1570422185642041347- Use the Workflow Event “A Embed Tweet Loaded”
- Go to the Workflow tab.
- Create a new event using:
- Hiding a loading spinner,
- Showing confirmation text,
- Triggering analytics or animations.
"A Embed Tweet Loaded"
This event allows you to trigger workflows once the tweet has fully loaded, such as:
Plugin Element Properties
Embed Tweet
Fields:
Title | Description | Type |
Id | The numerical ID of the desired Tweet. | Text |
Theme | When set to dark, displays Tweet with light text over a dark background. Available options: light, dark | Dropdown |
Align | Float the Tweet left, right, or center relative to its container. Available options: right, left, center | Dropdown |
Do not Track | When set to true, the Tweet and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads. | Checkbox (yes/no) |
Cards | Change this field to “hidden”, if links in a Tweet should not be expanded to photo, video, or link previews. | Text (optional) |
Conversation | Set this to “none” if only the cited Tweet should be displayed even if it is in reply to another Tweet. | Text (optional) |
Exposed states
Title | Description | Type |
Is Loading | “Is Loading” indicates that a process or resource is currently being fetched or prepared. | Checkbox (yes/no) |
Element Events
Title | Description |
Loaded | Indicates that tweets have been loaded |
