Example Widget Host Page

How To Guide

To run this example project, ensure the following environment variables are set in your .env.local file (in the packages/example-nextjs directory):

NEXT_PUBLIC_BONGENTIC_WIDGET_URL: (Client-side) URL from which to load the widget JavaScript. For local widget development, you might set this to http://localhost:3000/widgets/drop-in/bonterra-agent.min.js.
BONTERRA_AGENT_API_URL: (Server-side) The base URL of the actual Fundraising Coach API to which the proxy will forward all widget requests. The proxy adds a secret and a JWT to all requests. These authenticate the calls.
INTERNAL_API_SECRET: (Server-side) The shared secret that the local proxy will add as an X-Internal-Api-Secret header to requests forwarded to the BONTERRA_AGENT_API_URL.

Example .env.local configuration:

# For the widget script source (client-side)
NEXT_PUBLIC_BONGENTIC_WIDGET_URL=http://localhost:3000/widgets/drop-in/bonterra-agent.min.js

# For the server-side proxy target
BONTERRA_AGENT_API_URL=https://your-actual-agent-api-backend.com/api/v1
INTERNAL_API_SECRET=your-secret-here

Remember to restart the Next.js development server after creating or modifying the .env.local file.

Widget Configuration (Static)

The widget script is currently configured to load from:

https://mircea.bongentic.com/widgets/drop-in/bonterra-agent.min.js

The widget instance on this page is configured to send API requests to the local proxy at:

/api/widget-proxy

Widget Configuration (Dynamic Testing)

In a real deployment, these are set by the site that installs the widget.

Site ID:

Theme (not yet supported):

Position:

Agent:

Enable Canvas View

Snowflake Demo Configuration

Demo mode uses simulated data instead of connecting to Snowflake. Useful for development and demonstrations.

Enable Snowflake Demo Mode

Testing Authentication Parameters for JWT

In a real deployment, these are set by the proxy layer. The user cannot set them directly.

Preferred Username:

Entity ID (optional):

CSS Compatibility Testing

Test widget behavior with different CSS frameworks and font-size configurations.

Font Size Mode:

Pixel mode forces pixel-based font sizes to prevent inheritance issues like Bootstrap 4's 62.5% reduction.

Enable CSS Debug Mode(Check browser console for logs)

CSS Framework Simulation:

Bootstrap 4 sets html font-size to 62.5%, making widget text very small. Use these buttons to test the CSS compatibility system.

Generated Integration Code:

<bonterra-agent
  site-id="test-site-123"
  position="bottom-right"
  agent-id="fundraising-coach"
  endpoint="/api/widget-proxy"
  title="Fundraising Coach"
></bonterra-agent>