Embed Tweets from X / Twitter

Demo to preview the plugin:

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!
Image without caption

How to setup

  1. 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.
        • Element → Embed Tweet.
          Element → Embed Tweet.
  1. Configure the Embed Tweet Properties
    1. With the element selected, fill out the following fields in the Appearance tab:
      • Id: The Tweet ID you want to embed (e.g. 1570422185642041347).
        • To get the Tweet ID, copy the number at the end of a tweet URL.
          Example: https://twitter.com/user/status/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.
  1. Use the Workflow Event “A Embed Tweet Loaded”
      • Go to the Workflow tab.
      • Create a new event using:
        • "A Embed Tweet Loaded"
      Workflow action → A Embed Tweet Loaded.
      Workflow action → A Embed Tweet Loaded.
      This event allows you to trigger workflows once the tweet has fully loaded, such as:
      • Hiding a loading spinner,
      • Showing confirmation text,
      • Triggering analytics or animations.

Plugin Element Properties

Embed Tweet

Element properties → Embed Tweet.
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
Image without caption

Changelogs