How to Add a Twitter/X Feed to Your Website

With Jotform’s Twitter/X Feed Widget, you can display your latest posts and conversations directly on your website. Customize the feed to match your site, choose what to show, and keep visitors connected with your latest updates without sending them elsewhere.

Creating Your Twitter/X Feed Widget and Getting the Embed Code for It

Before you can add the Age Verification Widget to your website, you’ll first need to configure the age verification settings, customize the widget’s appearance, and copy the embed code for it. Here’s the quick way to do it:

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

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget window, enter Twitter/X Feed.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, set up these properties:
   • 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 on to show the widget’s header.
   • Widget Title — Add a title to appear at the top of the widget.

6. Then, scroll down and adjust these settings:
   • 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. Next, under the Styles tab, customize these properties:
   • 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 on 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. Then, scroll down and adjust these settings:
   • 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 Twitter/X Feed 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. Next, continue scrolling and adjust these options:
   • 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. Now, scroll down again and continue customizing these properties:
    • 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. Then, under the Layout tab, configure these properties:
    • 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. Next, scroll down and adjust these settings:
    • 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.
13. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

14. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
15. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

16. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

17. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Twitter/X Feed widget will appear on your website with the design and settings you selected for it.