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

The widget bundles the Roboto font by default via @font-face declarations in src/font.css. The font files are embedded into widget.css during the build.

Option A: Use a bundled custom font (recommended)

Add your font files to src/fonts/
Update src/font.css with your @font-face rules
Set the fontFamily in the theme config
Rebuild with npm run build — fonts will be embedded into widget.css

                
// 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.