Recommended Betslips Integration Guide

Introduction

The Recommended Betslips is a standalone micro-frontend Web Component that displays personalized recommended betting slips to users. It’s designed to be lightweight, self-contained, and easy to integrate into any section of your application, complementing your betting interface or appearing alongside other content.

This guide contains all information necessary to integrate, configure, and customize the Recommended Betslips for your specific use case.

About Micro-Frontends

Micro-frontends are independent, self-contained frontend applications that can be deployed separately and composed together in a larger application. They enable teams to develop, test, and deploy frontend features independently while maintaining a cohesive user experience.

The Sportsbook is built as a Web Component, a standard browser API that allows you to:

• Define custom HTML elements with encapsulated functionality
• Use the component in any JavaScript framework, vanilla HTML or even in native applications via WebViews
• Deploy and update the component independently
• Maintain clear boundaries between the component and host application

About the Tooling

All NSoft Sportsbook micro-frontends share a consistent architecture and deployment model.

Distribution Model

• CDN-only: Components are distributed exclusively via CDN to ensure users always receive the latest stable version without managing local builds
• ES Module: Distributed as ES modules (type="module"), compatible with all modern browsers and modern build systems
• Environment-specific: Separate builds are published for staging and production environments
• Dependency-free: Each component is self-contained with all dependencies bundled. Tree-shakeable and optimized for minimal payload size, with no external npm dependencies required.

Technology Stack

• TypeScript: Full type safety for better development experience
• Web Components API: Standard browser APIs for custom elements

Component Registration Pattern

All NSoft Sportsbook micro-frontend components follow a consistent registration pattern:

import { registerComponentName } from 'https://staging.nsftx-sports-web.nsoft.app/nsftx-sports-web.js'

registerComponentName({
  // Configuration options (component-specific)
})

Each component exports a registration function that:

• Validates the provided configuration using Zod schemas
• Defines the custom element in the browser’s element registry
• Sets up internal state management and routing (if applicable)

Installation

The Recommended Betslips Widget is distributed exclusively via CDN as an ES module. This ensures you always receive the latest stable version without managing local builds.

CDN URLs

Environment	Primary CDN	Secondary CDN (Fallback)
Production	https://nsftx-sports-web.nsoft.app/nsftx-sports-web.js	https://nsftx-sports-web.7platform.net/nsftx-sports-web.js
Staging	https://staging.nsftx-sports-web.nsoft.app/nsftx-sports-web.js	https://staging.nsftx-sports-web.7platform.net/nsftx-sports-web.js

We recommend implementing a fallback mechanism that attempts to load from the primary CDN first, then falls back to the secondary CDN if the primary is unavailable.

Registration

To register the Recommended Betslips Widget, import the registration function and call it with your configuration:

const PRIMARY_CDN = 'https://nsftx-sports-web.nsoft.app/nsftx-sports-web.js'
const SECONDARY_CDN = 'https://nsftx-sports-web.7platform.net/nsftx-sports-web.js'

let registerRecommendedBetslipsWidget

try {
  ;({ registerRecommendedBetslipsWidget } = await import(PRIMARY_CDN))
} catch (error) {
  console.warn('Primary CDN failed, attempting secondary CDN...', error)
  try {
    ;({ registerRecommendedBetslipsWidget } = await import(SECONDARY_CDN))
  } catch (error) {
    console.error('Both CDNs failed to load', error)
    throw error
  }
}

registerRecommendedBetslipsWidget()

Then add the component to your HTML:

<aside>
  <recommended-betslips />
</aside>

The default tag name is recommended-betslips. You can customize this during registration.

Configuration Options

Custom Tag Name

You can optionally provide a custom tag name if you need to distinguish between multiple instances or follow a specific naming convention:

registerRecommendedBetslipsWidget({
  tag: 'custom-betslips-widget'
})

<aside>
  <custom-betslips-widget />
</aside>

This is useful when:

• You have multiple widget instances with different purposes
• You need namespace separation
• You’re integrating with other components that might have naming conflicts

Events

The Recommended Betslips Widget emits events to communicate with its parent application through iGnite’s sendDomEvent mechanism. Your parent application can listen to these events using the onDomEvent handler.

NSFTX_RECOMMENDED_BETSLIPS_PREVIEW_DIALOG_OPENED

Emitted when a user opens the preview dialog for a recommended betslip (desktop view).

Payload: No payload

Example usage:

onDomEvent: (event) => {
  if (event.type === 'NSFTX_RECOMMENDED_BETSLIPS_PREVIEW_DIALOG_OPENED') {
    console.log('Preview dialog opened');
  }
}

NSFTX_RECOMMENDED_BETSLIPS_PREVIEW_DIALOG_CLOSED

Emitted when a user closes the preview dialog for a recommended betslip (desktop view).

Payload: No payload

NSFTX_RECOMMENDED_BETSLIPS_DRAWER_OPENED

Emitted when a user opens the drawer containing recommended betslips (mobile view).

Payload: No payload

NSFTX_RECOMMENDED_BETSLIPS_DRAWER_CLOSED

Emitted when a user closes the drawer containing recommended betslips (mobile view).

Payload: No payload

NSFTX_RECOMMENDED_BETSLIPS_IN_FULL_VIEW_ENABLED

Emitted when the widget enters full view mode on mobile, displaying all recommended betslips.

Payload: No payload

{
  "type": "NSFTX_RECOMMENDED_BETSLIPS_IN_FULL_VIEW_ENABLED",
}

NSFTX_RECOMMENDED_BETSLIPS_ADD_TO_BETSLIP

Emitted when a user adds a recommended betslip to their active betslip.

Payload:

Field	Description
action	Always set to 'add_to_betslip'
bet.betType	The type of bet (e.g., 'single', 'accumulator')
bet.selections	Array of bet selections, each containing: - marketId: Market identifier - outcomeId: Outcome identifier - outcomeOdds: Odds for the outcome - banker: Whether this is a banker selection (for trixie/yankee bets) - eventId: Event identifier - eventMarketId: Event market identifier - eventMarketOutcomeId: Event market outcome identifier

{
  "type": "NSFTX_RECOMMENDED_BETSLIPS_ADD_TO_BETSLIP",
  "payload": {
    "action": "add_to_betslip",
    "bet": {
      "betType": "single",
      "selections": [
        {
          "marketId": "12345",
          "outcomeId": "67890",
          "outcomeOdds": 1.85,
          "banker": false,
          "eventId": "event123",
          "eventMarketId": "market123",
          "eventMarketOutcomeId": "outcome123"
        }
      ]
    }
  }
}

NSFTX_RECOMMENDED_BETSLIPS_NAVIGATE_TO_EVENT

Emitted when a user clicks to navigate to a specific event from within the widget.

Payload:

Field	Description
path	Navigation path to the event in format /sports/e_{eventId}

{
  "type": "NSFTX_RECOMMENDED_BETSLIPS_NAVIGATE_TO_EVENT",
  "payload": {
    "path": "/sports/e_12345"
  }
}

Troubleshooting

Styling Not Applied

Problem: CSS styles for the widget aren’t working.

Solution: The widget uses Shadow DOM encapsulation. Style the component container instead of elements inside:

/* Correct - style the container */
aside recommended-betslips {
  display: block;
  margin: 20px 0;
}

/* Won't work - widget content is encapsulated */
recommended-betslips h2 {
  color: blue;
}

CSS Variable Inheritance

Exposed CSS variables

The widget can inherit CSS variables from its integrator, allowing you to tailor certain styles by declaring CSS variables in your root element.

Variable	CSS Property	Default	Description
--nsftx-recommended-betslips-preview-dialog-z-index	z-index	1	Defines the z-index value for the overlay of the recommended betslip’s preview dialog. This setting ensures that the overlay appears above other UI elements when the dialog is active, maintaining proper visual stacking and focus.

Usage example

:root {
  --nsftx-recommended-betslips-preview-dialog-z-index: 2;
}

This allows you to integrate the widget seamlessly into your application’s layout, ensuring dialogs appear at the correct stacking level relative to other elements.

No Router Required

Unlike the Sportsbook component, this widget doesn’t require routing configuration. It works as-is with minimal setup.

Additional Resources

• Web Components - Using Custom Elements - MDN documentation on Web Components

Integration Examples

You can find a GitHub project showcasing integration of the Recommended Betslips micro-frontend in multiple JavaScript frameworks (Vanilla JS, Vue, Next.js, Svelte) here:

• NSoft Sportsbook Micro-Frontends Integration Examples