Calculator Widget Demo

This page demonstrates how to embed calculator widgets from Instant Odds Solver into third-party websites.

Method 1: Data Attributes (Automatic)

The simplest way to embed a widget using HTML data attributes:

          <!-- Include the widget script --> <script
          src="http://localhost:3000/widget/calculator-widget.js"></script> <!-- Add widget container with
          data attributes --> <div data-calculator-widget="parlay" data-theme="auto" data-compact="false"
          data-hide-branding="false"> </div>
        

Method 2: Programmatic (Advanced)

For more control, create widgets programmatically with JavaScript:

          <script src="http://localhost:3000/widget/calculator-widget.js"></script> <div
          id="my-calculator"></div> <script> const widget = new CalculatorWidget({ container:
          '#my-calculator', calculator: 'blackjack-side-bet-variance', theme: 'auto', compact: true, onReady: (widget)
          => console.log('Widget ready!'), onCalculation: (result) => console.log('Calculation:', result) });
          </script>
        

Method 3: Different Calculator Types

Switch between different calculator types:

Method 4: Compact Mode

Widgets can be displayed in compact mode for smaller spaces: