How to Embed Twitter/X Feed on a Website

A Twitter/X feed is a great way to keep your website updated with your latest posts and conversations. Whether you’re sharing company news, promoting new content, or engaging with your audience, displaying your Twitter/X feed helps visitors stay connected with your latest updates without leaving your website.

With Jotform’s Twitter/X Feed Widget, you can showcase your posts in a customizable feed that complements your website’s design. Customize how your feed looks, choose what information to display, and embed it on your website in just a few simple steps.

Creating Your Twitter / X Feed Widget

Before you can embed the widget on your website, you’ll first need to connect your Twitter/X account and customize how your feed will appear. Here’s the quick way to do it:

1. On your Workspace page, click on Create on the top-left side of the screen.

2. In the window that opens up, click on Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the Twitter / X Feed.
4. Then, in the search results, click on Use Widget.

5. Now, in Website Widgets, under the General tab in the Widget Properties panel on the right side of the page, configure the following options:
   • Connected Sources
     • Platform — Choose the social media platform you want to display content from. For this widget, select X.
     • Source Type — Choose the type of Twitter / X Feed content to display, such as posts from a specific account or another supported source.
     • Source — Enter or select the Twitter / X Feed account or source you want the widget to display.
     • Add Source Button — Click this after setting up the Twitter / X Feed sources to display content
   • Heading — Toggle this to show or hide the widget’s header.
   • Widget Title — Add a title to appear at the top of the widget.

6. Then, scroll down to the bottom and continue to set up these things:
   • Widget Description  — Add a short description below the title to provide context for your Twitter / X Feed.
   • Source Tabs — Show tabs that let visitors switch between multiple connected Twitter / X Feed sources.
   • Author Name — Show or hide the name of the Twitter / X Feed account that published each post.
   • Author Picture — Show or hide the profile picture of the Twitter / X Feed account.
   • Publication Date — Show or hide the date each Twitter / X Feed post was published.
   • Post Text — Show or hide the caption or text associated with each Twitter / X Feed post.
   • Source Label — Display a label indicating which connected Twitter / X Feed source each post belongs to.

7. Once you’re done, switch to the Styles tab and manage the following options:
   • Color Scheme — Choose a predefined color scheme or customize the widget’s colors to match your website.
   • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
   • Post Style — Select the overall appearance of each Twitter / X Feed post card.
   • Action on Post Click — Choose what happens when a visitor clicks a post, such as opening it in a popup or redirecting to Twitter / X Feed.
   • Popup Style — Customize the appearance of the popup displayed when visitors open a post.
   • Image Ratio — Adjust how images are cropped or displayed within each post.

8. Next, scroll down and set up these other options:
   • Actions Bar — Show or hide the action bar containing engagement or sharing options.
   • Source Style — Customize how the connected Twitter / X Feed source information is displayed.
   • External Links — Show or hide links that direct visitors to Twitter / X Feed.
   • Card Accent Colors — Choose how accent colors are applied to your Twitter / X Feed cards. You can use Instagram’s default platform colors, apply a single custom accent color across all cards, or turn off card accents altogether.
   • Accent Color — Choose the accent color used throughout the widget.
   • Background Color — Set the overall background color of the widget.
   • Post Background — Choose the background color of each post card.

9. Moving on, scroll down and continue to configure these things:
   • Post Text Color — Set the color of the text displayed in each post.
   • Post Link Color — Choose the color used for links displayed within posts.
   • Popup Background — Set the background color of the post popup.
   • Popup Backdrop Color — Enter a CSS color of the overlay displayed behind the popup.
   • Popup Text Color — Set the text color used inside the popup.
   • Arrow Background — Choose the background color of the popup navigation arrows.

10. After that, scroll down to the bottom and set up these options:
    • Arrow Color — Set the color of the navigation arrow icons.
    • Pagination Color — Customize the color of the pagination controls.
    • Text Size — Adjust the size of the text displayed in your Twitter/X feed to improve readability or better match your website’s design.
    • Corner Radius — Control how rounded the corners of the feed cards appear, from sharp edges to a softer, more modern look.
    • Card Shadow — Enable or adjust the shadow effect around each post card to add depth.
    • Custom CSS — Apply your own CSS styles for advanced customization beyond the built-in settings.

11. Following that, switch to the Layout tab and configure the following options:
    • Layout — Choose how your Twitter / X Feed posts are arranged, such as in a grid, masonry, carousel, or another supported layout.
    • Width — Adjust the overall width of the widget to fit your website’s layout.
    • Columns — Choose how many columns of posts are displayed at once. More columns allow more posts to appear side by side.
    • Rows — Set the number of rows displayed in the widget, controlling how many posts are visible vertically.
    • Item Spacing — Adjust the amount of space between individual posts for a more compact or spacious layout.

12. Then, scroll down to the bottom and continue to set up these things:
    • Post Limit — Choose the maximum number of Twitter/X posts the widget displays at one time.
    • RTL — Enable Right-to-Left (RTL) layout for languages that are read from right to left.
    • Open Links in New Tab — Choose whether Twitter / X Feed links open in a new browser tab.
    • Align Cards by Height — Make all post cards the same height for a cleaner, more consistent layout, even when posts contain different amounts of text.

That’s it. Your Twitter/X Feed Widget is now set up and ready. Next, you’ll copy its embed code so you can add it to your website.

Getting Your Twitter / X Feed Widget Embed Code

Once you’ve finished customizing your Twitter/X Feed Widget, you’re ready to get its embed code. It’s easier than you think:

1. In Website Widget, in the pink navigation bar at the top of the page, click on Publish.

2. Then, click on Copy Code.
3. Or, if your website is built on a supported platform, click on Platforms in the menu on the left. 

4. Next, in the Search bar at the top of the Platforms page, search for the specific platform.

5. For this example, we’ll use the Wix platform. Click on its icon.

6. Finally, click on Copy Code, and you’re done.

That’s it. Simply paste the embed code into your website, and the widget will automatically display your latest Twitter/X posts for visitors to explore. Take a look at the screenshot below to see how it appears on a sample website.