Widgets Integration & Embed Codes
HomeDocsDeveloper Utilities & Tools

Widgets Integration & Embed Codes

Category: Developer Utilities & Tools

Our custom widgets allow you to embed our premium tools directly on your website or application. We offer two customizable iframe-based widgets:


Available Widget Products

1. Standalone Bikram Sambat (BS) Calendar Widget

  • Description: Displays the current monthly Bikram Sambat calendar grid, complete with Nepalese holidays, festival labels, and corresponding Gregorian AD dates.
  • Base Embed URL: https://bishalcodes.com/widgets/calendar
  • Recommended Dimension:
    • Medium: 340px width × 420px height
    • Small: 220px width × 380px height (optimized text scaling and responsive holiday indicator dots)
    • Full: 800px width × 600px height (standard desktop table grid)

2. Standalone Date Converter Widget

  • Description: A bidirectional Gregorian (AD) to Bikram Sambat (BS) date conversion utility.
  • Base Embed URL: https://bishalcodes.com/widgets/date-converter
  • Recommended Dimension: 340px width × 420px height (standard block) or 220px width × 380px height (slim vertical container)

Step-by-Step Integration Guide

To embed a widget on your site, follow these simple steps:

  1. Configure Parameters: Go to the Widgets Integrations Playground to select your widget template, size preset, or input custom height and width.
  2. Copy Code: Click the copy icon to copy the generated HTML <iframe> code block to your clipboard.
  3. Paste Into Source:
    • Custom HTML Sites: Paste the copied iframe block directly into your HTML file.
    • WordPress: Add a Custom HTML block and paste the iframe snippet.
    • Webflow / Wix: Insert an Embed Component or HTML iframe block and paste the snippet.

Advanced Customization & Parameters

The iframe wrapper automatically adapts to light and dark theme modes based on the user's browser settings. Ensure the allowtransparency="true" attribute is present on the iframe element to maintain transparency backgrounds:

<iframe 
  src="https://bishalcodes.com/widgets/calendar" 
  frameborder="0" 
  scrolling="no" 
  style="border: none; overflow: hidden; width: 340px; height: 420px;" 
  allowtransparency="true"
></iframe>
Need Further Custom Specifications?

If your query requires dedicated technical attention or if you need a customized service scope, please submit a message via our contact portal.

Documentation

Documentation & Guides | Bishal Codes