Social Widget Web Component

Note: This example demonstrates the custom web component for the social feed widget. Replace the placeholder token with a real authentication token for your user. See the Widgets Docs Index for theming and embed attributes.

Authentication Required: The social widget requires a valid JWT token to display the feed and enable commenting functionality.

Grid Layout (Public)

<legion-social layout="grid" rows="2" cols="3" width="600" height="400" api-url="${window.location.origin}" community-url="${window.location.origin}/community" channel="general"></legion-social>

4x2 Grid Example (8 items):

<legion-social layout="grid" rows="2" cols="4" width="800" height="400" api-url="${window.location.origin}" community-url="${window.location.origin}/community" channel="announcements"></legion-social>

Feed Layout (Authenticated)

              <legion-social layout="feed" auth-token="your-jwt-token"
              width="600" height="800" channel="general"
              api-url="${window.location.origin}"></legion-social>
            

Integration Code

1. Include the Widget Script

          <script
          src="${window.location.origin}/js/social-widget.js"></script>
        

2. Add the Widget to Your Page

          <legion-social api-url="${window.location.origin}" width="600"
          height="800"> </legion-social>
        

3. Widget Attributes

api-url: The base URL of your application
auth-token: Valid JWT token for the user (optional when layout="grid")
width: Widget width in pixels (default: 600)
height: Widget height in pixels (default: 800). For feed layout, enables constrained scrolling with "Load more" button when specified.
theme: Widget theme - "light" or "dark" (default: light)
layout: "feed" or "grid". Grid shows an Instagram-style image grid only.
rows / cols: Number of rows and columns for grid layout (defaults: 3x3). Grid will show exactly rows × cols items.
community-url: The URL of your Community Page. When set for the grid layout, clicking an image opens this page in a new tab with postId, mediaIndex, gridIndex and UTM params.
channel: Optional channel slug to filter posts. If omitted, shows all channels for the shop (default behavior).

Features

Real-time social feed display
Like and comment functionality
User authentication integration
Responsive design

Deep-linking to Your Community Page

Provide community-url on <legion-social> when using layout="grid". Clicking an image opens your page in a new tab with the following query params: postId, mediaIndex, gridIndex, utm_source, utm_medium, utm_campaign.

              <legion-social layout="grid" rows="3" cols="3"
              api-url="${window.location.origin}"
              community-url="${window.location.origin}/community"></legion-social>
            

On your community page, read the query params and scroll/focus to the post.

              <script> document.addEventListener('DOMContentLoaded', ()
              => { const p = new URLSearchParams(window.location.search);
              const postId = p.get('postId'); const mediaIndex =
              parseInt(p.get('mediaIndex') || '0', 10); if (!postId) return; let
              el = document.querySelector(`[data-post-id="${postId}"]`) ||
              document.getElementById(`post-${postId}`); const tryFocus = (n =
              10) => { if (el) { el.scrollIntoView({ behavior: 'smooth',
              block: 'center' }); } else if (n > 0) { setTimeout(() => {
              el = document.querySelector(`[data-post-id="${postId}"]`) ||
              document.getElementById(`post-${postId}`); tryFocus(n - 1); },
              300); } }; tryFocus(); }); </script>
            

Height-Constrained Feed (with Load More)

For feed layout, specify a height to create a scrollable container with a "Load more posts" button. This is useful for embedding feeds in specific page sections with limited space.

              <legion-social layout="feed" width="600" height="2200px"
              api-url="${window.location.origin}"
              auth-token="your-jwt-token"></legion-social>
            

When height is specified, the feed becomes scrollable and shows a "Load more posts" button at the bottom to fetch additional content without expanding the container height.

Cross-origin iframe support
Secure token-based authentication