Genassist Widget - Example Integration

Example implementation for JavaScript render forms

Step 1: Add the Widget Script & CSS

Include the widget script in your template or via a JavaScript render form:

                
<!-- For production (CDN): -->
<link rel="stylesheet" href="https://your-cdn-url.com/widget.css">
<script src="https://your-cdn-url.com/widget.iife.js"></script>

<!-- For local testing: -->
<link rel="stylesheet" href="./dist/widget.css">
<script src="./dist/widget.iife.js"></script>
                
            

Custom Fonts

Fonts are wired through the widget entry: src/main.jsx imports src/font.css, and font.css declares @font-face rules whose src: url(...) paths point at files under src/fonts/. By default the repo ships Roboto faces that way.

When you run npm run build, Vite resolves those assets and emits dist/widget.css. The @font-face blocks and the font binary data they reference are folded into that single stylesheet, so hosts only need to load widget.css plus widget.iife.js—no separate font URLs unless you load fonts externally (Option B).

Option A: Bundle custom fonts (recommended)

Add font files under src/fonts/ (keep paths stable for url("./fonts/…") from font.css)
Edit src/font.css: add or replace @font-face rules (one block per weight/style you need)
Set theme.fontFamily in GENASSIST_CONFIG to match your font-family name
Run npm run build — output dist/widget.css contains the bundled font CSS; ship that file with your integration

                
// In src/font.css:
@font-face {
  font-family: "YourFont";
  src: url("./fonts/YourFont/YourFont-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

// In GENASSIST_CONFIG:
theme: { fontFamily: 'YourFont, sans-serif' }
                
            

Option B: Load fonts externally (e.g., Google Fonts)

If you prefer not to bundle fonts, load them via a <link> tag and reference them in the theme config:

                
<!-- Load font from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap">

<script>
  window.GENASSIST_CONFIG = {
    // ...
    theme: {
      fontFamily: 'Inter, sans-serif'
    }
  };
</script>
                
            

Note: When using external fonts, you can remove or empty the @font-face rules in src/font.css to reduce the widget.css bundle size.

Step 2: Complete Example Integration for JavaScript Render Forms

Here's the complete code you can paste into your JavaScript render form:

                
<!-- Root container for the widget -->
<div id="genassist-chat-root"></div>

<!-- Widget Configuration and Auto-initialization -->
<script async>
  (function() {
    'use strict';

    window.GENASSIST_CONFIG = {
      baseUrl: '_base_url_',
      apiKey: '_apiKey_',
      tenant: '',
      headerTitle: 'GenAssist Demo',
      mode: 'floating',
      floatingConfig: { position: 'bottom-right' },
      serverUnavailableMessage: 'Support is currently offline. Please try again later or contact us.',
      noColorAnimation: true,
      useWs: false,
      useFiles: false,
      usePoll: false,
    };

  })();
</script>

<!-- Widget Script and CSS -->
<script src="./dist/widget.iife.js"></script>
<link rel="stylesheet" href="_asset_widget.css_" async>
            

Note: Make sure to replace the placeholder values (your-api-url.com, your-api-key, etc.) with your actual configuration values.

Live Demo

The widget should automatically appear in the bottom-right corner of this page. Update the configuration above with your API credentials to test.