Working with Widgets

Widgets are the final output of your Crowdynews content curation. They transform your organized topics into beautiful, embeddable components that can be added to any website. This guide covers widget creation, customization, and implementation strategies.

Crowdynews offers four main widget types to suit different layout needs:

Vertical Widget

Best for: Sidebars, narrow columns

Stacked layout perfect for blog sidebars and vertical spaces.

Horizontal Widget

Best for: Headers, footers, wide sections

Row-based layout ideal for banner areas and wide content zones.

Full Page Widget

Best for: Dedicated content pages

Complete page layout for content-focused experiences.

YouTube Widget

Best for: Video content only

Specialized widget optimized specifically for YouTube videos.

Widget Types Comparison Placeholder: Visual comparison of all four widget types

Navigate to Widgets

From the main menu, click “Widgets” to access the widget management area.

Placeholder: Main navigation highlighting widgets menu
Start Widget Creation

Click “Create New Widget” to begin the widget configuration process.

Placeholder: Widget dashboard with create button highlighted
Configure Basic Settings

Set up your widget’s fundamental properties:
- Name: Descriptive name for your widget
- Type: Choose from vertical, horizontal, full page, or YouTube
- Description: Optional description for organization
Placeholder: Widget creation form with basic settings
Select Widget Type

Choose the appropriate widget type based on your intended use case.

Placeholder: Widget type selection with previews

Attaching Topics

Connect one or more topics to your widget:

Topic Selection Interface

Choose which topics to include in your widget.

Placeholder: Topic selection with checkboxes and search
Multiple Topic Benefits

Combining topics allows you to:
- Aggregate content from different themes
- Create comprehensive content displays
- Balance different content types
- Increase content volume and variety
Topic Priority Order

When multiple topics are selected, content is combined with:
- Pinned items from all topics appearing first
- Regular content mixed chronologically
- Source attribution maintained

Content Display Options

Configure how your content appears:

Content Display Options Placeholder: Content display configuration panel

Available Options:

Items per page: How many items to display
Auto-refresh: Enable automatic content updates
Show metadata: Display author, date, source information
Excerpt length: Control preview text length
Image handling: Include/exclude media thumbnails

Perfect for sidebar placement and narrow columns:

Vertical Widget Example Placeholder: Vertical widget in a blog sidebar

Characteristics:

Single-column layout
Compact content cards
Minimal horizontal space requirement
Scroll-friendly design

Best Use Cases:

Blog sidebars
News website sidebars
Mobile-friendly layouts
Narrow content areas

Ideal for wide sections and banner areas:

Horizontal Widget Example Placeholder: Horizontal widget in a website header

Characteristics:

Row-based layout
Horizontal content scrolling
Wide format optimization
Multiple items visible simultaneously

Best Use Cases:

Website headers
Footer content areas
Wide page sections
Featured content banners

Complete page experience for content-focused sites:

Full Page Widget Example Placeholder: Full page widget as main content area

Characteristics:

Complete page layout
Grid-based content organization
Comprehensive navigation
Maximum content display

Best Use Cases:

Dedicated content pages
News aggregation sites
Content portals
Main page content areas

Specialized for video content:

YouTube Widget Example Placeholder: YouTube-specific widget with video thumbnails

Characteristics:

Video-optimized layout
Thumbnail previews
Play duration display
YouTube-specific metadata

Best Use Cases:

Video galleries
Channel showcases
Educational content displays
Entertainment websites

Getting the Embed Code

Once your widget is configured:

Generate Code

Click “Get Embed Code” to generate your JavaScript snippet.

Placeholder: Widget configuration page with embed code button
Copy the Code

Copy the generated JavaScript snippet.

Placeholder: Code snippet display with copy button
Implementation Options

Choose from different implementation methods based on your needs.

Basic Embedding

The simplest way to embed your widget:

<!-- Basic widget embed -->
<div id="crowdynews-widget"></div>
<script src="https://widgets.crowdynews.com/widget.js?id=YOUR_WIDGET_ID"></script>

Advanced Embedding Options

Custom Container

Specify a custom container for your widget:

<!-- Custom container -->
<div id="my-custom-container"></div>
<script>
  window.CrowdynewsWidget = {
    containerId: 'my-custom-container',
    widgetId: 'YOUR_WIDGET_ID'
  };
</script>
<script src="https://widgets.crowdynews.com/widget.js"></script>

Responsive Configuration

Configure responsive behavior:

<!-- Responsive widget -->
<script>
  window.CrowdynewsWidget = {
    widgetId: 'YOUR_WIDGET_ID',
    responsive: true,
    breakpoints: {
      mobile: 480,
      tablet: 768,
      desktop: 1024
    }
  };
</script>
<script src="https://widgets.crowdynews.com/widget.js"></script>

Custom Styling

Apply custom styles:

<!-- Custom styling -->
<script>
  window.CrowdynewsWidget = {
    widgetId: 'YOUR_WIDGET_ID',
    customCSS: `
      .crowdynews-widget {
        font-family: 'Your Font', sans-serif;
        border-radius: 8px;
      }
      .crowdynews-item {
        border: 1px solid #eee;
        margin-bottom: 10px;
      }
    `
  };
</script>
<script src="https://widgets.crowdynews.com/widget.js"></script>

Styling Options

Customize your widget’s appearance:

Widget Styling Options Placeholder: Widget styling configuration panel

Available Customizations:

Color schemes
Font selections
Border styles
Spacing adjustments
Image display options

Content Filtering

Filter widget content beyond topic-level filtering:

Widget Content Filtering Placeholder: Widget-specific content filtering options

Widget-Level Filters:

Maximum age of content
Minimum engagement thresholds
Source-specific inclusion/exclusion
Content type filtering

Performance Optimization

Configure widget performance settings:

Widget Performance Settings Placeholder: Performance optimization options

Performance Options:

Lazy loading
Image optimization
Caching strategies
Load prioritization

Editing Existing Widgets

Access Widget Settings

From the widgets dashboard, click the settings icon next to any widget.

Placeholder: Widget list with settings icons
Modify Configuration

Update any aspect of your widget configuration.

Placeholder: Widget editing form
Update Embed Code

If you change widget settings, you may need to update your embed code.

Monitor widget performance:

Widget Analytics Dashboard Placeholder: Widget analytics showing views, clicks, and engagement

Key Metrics:

Widget views and impressions
Content click-through rates
Most popular content items
Geographic distribution
Device and browser statistics

Manage different versions of your widgets:

Widget Versioning Placeholder: Widget version management interface

Version Control Features:

Save widget configurations as versions
Rollback to previous versions
A/B testing capabilities
Staged deployment options

Best Practices

Match Layout to Purpose

Choose widget types that complement your site’s layout. Vertical widgets for sidebars, horizontal for banners.

Optimize Content Volume

Display 5-10 items for most widgets. Too few looks empty, too many overwhelms users.

Regular Updates

Keep widget content fresh by regularly reviewing and updating attached topics and pinned items.

Performance Monitoring

Monitor widget load times and engagement. Optimize settings based on real usage data.

Troubleshooting

Common Implementation Issues

Widget Not Loading:

Verify the embed code is correct
Check for JavaScript conflicts
Ensure the container element exists
Validate widget ID

Styling Issues:

Check CSS conflicts with your site
Verify custom CSS syntax
Test responsive behavior on different devices
Clear browser cache

Content Not Updating:

Verify topics are actively collecting content
Check queue content visibility settings
Confirm widget is attached to correct topics
Review caching settings

Performance Optimization

Slow Loading Widgets:

Enable lazy loading
Optimize image sizes
Reduce number of displayed items
Use caching effectively

Mobile Performance:

Test on various devices
Optimize for touch interactions
Ensure responsive design works correctly
Consider mobile-specific widget versions

Advanced Integration

WordPress Integration

Special considerations for WordPress sites:

<!-- WordPress widget integration -->
function add_crowdynews_widget() {
    echo '<div id="crowdynews-widget"></div>';
    echo '<script src="https://widgets.crowdynews.com/widget.js?id=YOUR_WIDGET_ID"></script>';
}
add_action('wp_footer', 'add_crowdynews_widget');

React/Vue Integration

For modern JavaScript frameworks:

// React component example
import { useEffect } from 'react';

function CrowdynewsWidget({ widgetId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://widgets.crowdynews.com/widget.js?id=${widgetId}`;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [widgetId]);

  return <div id="crowdynews-widget"></div>;
}

Ready to integrate with your systems? Explore the API documentation or learn about API usage patterns.

Working with Widgets

Widget Types Overview

Creating Your First Widget

Configuring Widget Content

Attaching Topics

Content Display Options

Widget Type Details

Vertical Widget

Horizontal Widget

Full Page Widget

YouTube Widget

Widget Embedding

Getting the Embed Code

Basic Embedding

Advanced Embedding Options

Custom Container

Responsive Configuration

Custom Styling

Widget Customization

Styling Options

Content Filtering

Performance Optimization

Widget Management

Editing Existing Widgets

Widget Analytics

Widget Versioning

Best Practices

Troubleshooting

Common Implementation Issues

Performance Optimization

Advanced Integration

WordPress Integration

React/Vue Integration