Events widget

Everything you need to embed the IC Event Widget (<ic-event>) on your website.

How to Embed

Add the widget script and custom element to your HTML page:

<!-- 1. Include the widget script -->
<script type="module" src="https://events-cdn.investorcaller.com/widget/v1/ic-event.js"></script>

<!-- 2. Add the widget element -->
<ic-event team="your-team-slug" event="your-event-slug"></ic-event>

The widget uses Shadow DOM for complete encapsulation — no styles or scripts will leak into or out of your page.

Minimal Example

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://events-cdn.investorcaller.com/widget/v1/ic-event.js"></script>
</head>
<body>
  <ic-event team="cityvarasto" event="cityvarasto-q4-osavuosikatsaus-2025"></ic-event>
</body>
</html>

Attributes Reference

Configure the widget behavior using HTML attributes on the <ic-event> element.

Attribute Type Default Description
team string required Team slug identifying the organization
event string required Event slug identifying the specific event
theme string "light" Color theme. Options: "light", "dark"
autoplay boolean false Auto-start video playback on load (presence attribute)
slides-hidden boolean false Hide the slides panel initially (presence attribute)
video-hidden boolean false Hide the video player initially (presence attribute)
disable-toolbar boolean false Remove the toolbar for a clean, read-only presentation (presence attribute)

Examples

<!-- Dark theme with autoplay -->
<ic-event team="anora" event="my-event" theme="dark" autoplay></ic-event>

<!-- Slides-only view (video hidden) -->
<ic-event team="anora" event="my-event" video-hidden></ic-event>

<!-- Clean embed without toolbar -->
<ic-event team="anora" event="my-event" disable-toolbar></ic-event>

Live Examples

See the widget in action with various configurations on the Demo Gallery page. It includes 7 different widget configurations demonstrating all attributes and combinations.

Troubleshooting

Widget not loading

  • Ensure the <script> tag has type="module"
  • Check the browser console for JavaScript errors
  • Verify the widget script URL is accessible (open it directly in a browser tab)
  • Check CORS headers in the browser DevTools Network tab

Video not playing

  • Verify the event has a valid HLS stream URL configured
  • Check that the event status is ondemand (recording available) or live
  • For autoplay, most browsers require the video to be muted — the widget handles this automatically
  • Open DevTools console and look for Flowplayer-related errors

Slides not syncing

  • Live events: Check SSE connection in DevTools → Network → filter "EventStream"
  • On-demand events: Ensure the event has slide timing data (cuepoints)
  • Verify the event_slide_logs table has entries for the event

CORS errors

  • The widget API allows requests from *.investorcaller.com by default
  • For embedding on external domains, ensure your domain is in the allowed origins list
  • Contact support if you need to add a new domain to the allowlist

Multiple widgets on one page

  • Each widget instance is fully isolated via Shadow DOM
  • Each widget maintains its own SSE connection
  • Performance may degrade with many simultaneous widgets — we recommend a maximum of 3-5 per page in production