Configuring Widgets

​

Overview

​

Before You Start

• Administrative or widget management permissions in your Mapademics account
• At least one program with completed skills processing
• Your organization’s public API key (found in Organization Settings)

• Your institution’s brand colors (hex codes)
• Preferred widget header text or titles
• Understanding of where the widget will be embedded (website sections, course catalogs, etc.)

​

Steps

​

Step 1: Access Widget Configuration

1. Go to Widget Section: From the main navigation, click Widget to access the widget management area
2. Select Your Program: Use the program selector dropdown to choose which academic program you want to configure
   • Only programs with completed skills processing will show career opportunity data
   • If no programs appear, ensure skills extraction has been completed for your courses

​

Step 2: Customize Widget Appearance

1. Update Header Title:
   • Modify the default title to match your preferred messaging
   • Example: “Career Opportunities: [Program Name]” or “Employment Outcomes for [Program]”
   • Keep titles concise but descriptive for better user engagement
2. Set Brand Colors:
   • Header Start Color: Choose the primary color for the gradient header background
   • Header End Color: Select the secondary color to create an attractive gradient effect
   • Use your institution’s official brand colors for consistent visual identity
   • Colors can be selected using the color picker or entered as hex codes

​

Step 3: Configure Data Display Options

• Toggle Program Averages: Use the switch to show or hide summary statistics
  • Enabled: Displays averaged salary, growth, and employment data across all career paths
  • Disabled: Shows only individual occupation data without summary rows
• Recommendation: Enable averages for prospective students who want quick program overviews

• All widgets automatically display relevant career opportunities based on your program’s SOC mappings
• Information includes job titles, median wages, employment totals, growth projections, and education requirements
• Data refreshes automatically as your program information changes

​

Step 4: Preview Your Configuration

1. Review Live Preview: The preview updates automatically as you make configuration changes
2. Test Responsiveness: The widget automatically adapts to different container widths
3. Verify Data Accuracy: Ensure career opportunities data appears correctly for your selected program
4. Check Visual Appeal: Confirm colors and text create an attractive, professional appearance

​

Step 5: Generate Embed Code

1. Show Embed Code: Click the “Show Embed Code” button to reveal implementation options
2. Copy Widget URL: Use the “Copy URL” button to get the direct widget URL for advanced implementations
3. Copy HTML Embed Code: Use the “Copy Code” button to get ready-to-use HTML embed code
4. Save Configuration: Your settings are automatically saved as you make changes

• Widget URL: Direct link to your configured widget for custom implementations
• HTML Embed Code: Standard iframe code ready for pasting into websites, course catalogs, or content management systems

​

What Happens Next

1. Immediate Availability: Your configured widget is ready for embedding with the generated code
2. Real-Time Updates: Configuration changes apply instantly to all embedded instances
3. Data Synchronization: Career opportunity information updates automatically as your program data changes
4. Multiple Use Cases: Use the same configuration across different website locations and marketing materials

​

Customization Best Practices

• Use your institution’s official brand colors for consistency
• Ensure sufficient contrast between background and text colors
• Keep header titles concise but informative
• Test appearance on both desktop and mobile devices

• Enable program averages for general audiences (prospective students, parents)
• Consider disabling averages for detailed analysis (faculty, advisors, current students)
• Regularly review data accuracy as programs evolve

• Widgets load quickly and don’t impact website performance
• Responsive design automatically adapts to container sizes
• No additional JavaScript libraries required for basic implementation

​

Troubleshooting Configuration Issues

• Verify your program has completed skills processing
• Ensure SOC mappings exist for your program
• Check that your organization’s public API key is active

• Allow a few moments for changes to propagate
• Clear your browser cache if using preview mode
• Verify configuration was saved (changes save automatically)

• Confirm you’re using the complete HTML embed code
• Check that iframe embedding is allowed on your target website
• Verify the widget URL includes all required parameters

​

Related Tasks

• Embedding Widgets - Technical implementation guide for adding widgets to websites
• Widget System Overview - Understanding the complete widget ecosystem
• Organization Settings - Managing API keys and organizational access
• Program Reports - Source data that powers your widget displays