Skip to main content
The Genow Widget is a web component designed for embedding in websites. It allows you to bring Genow use cases directly to your end users.
Note that the widget only shows one use case. Users will only see the input field and the answer. An asset selection is not possible - the preselected assets will be taken into account. Guided search fields are not supported currently.
Prerequisites: Before you begin, ensure you have the required files provided by Genow: vue.global.prod.js (Vue 3 build),
genow-widget.css (styles), and
genow-widget.umd.min.js (minified UMD bundle with FontAwesome included)
To integrate the widget, you need to follow three main steps:
  1. Load the required resources (CSS, Vue3, UMD bundle - see above),
  2. Add the custom element <genow-widget> to your HTML &
  3. Configure authentication and attributes.

​
(1) Basic Integration Steps

1

Load Resources

Include the CSS and JavaScript files in your HTML structure. You must load the widget CSS, the Vue 3 global build, and the Genow Widget UMD bundle.
<link rel="stylesheet" href="[https://your-cdn.com/genow-widget.css](https://your-cdn.com/genow-widget.css)">

<script src="[https://your-cdn.com/vue.global.prod.js](https://your-cdn.com/vue.global.prod.js)"></script>

<script src="[https://your-cdn.com/genow-widget.umd.min.js](https://your-cdn.com/genow-widget.umd.min.js)"></script>
2

Add the Custom Element

Add the <genow-widget> custom element to your HTML where you want the widget to load. The widget is responsive and adapts to the container size, while overlays are shown over the whole screen.
<genow-widget
  use-case-id="your-use-case-id"
  api-endpoint="[your-api.com/api](https://your-api.com/api)"
  auth-provider="your-provider"
  auth-token="your-token">
</genow-widget>
3

Handle Authentication

The widget requires a valid authentication token to access your data.
Token Management: Tokens must be obtained from your authentication system. When a token expires, it must be refreshed, and the widget may need to be reloaded.
Supported Authentication Methods:
  • Firebase (email/password, Google SSO): use auth-provider="Firebase"
  • Microsoft SSO (EntraID/Azure AD): use auth-provider="Microsoft"
  • Google SAML: use auth-provider="Genow"
Implementation Example: You can update the widget attributes dynamically via JavaScript after the user logs in.
// After user logs in, get token
const authToken = await getAccessToken(); // Your auth method

// Set token on widget element
const widget = document.querySelector('genow-widget');
widget.setAttribute('auth-token', authToken);
widget.setAttribute('auth-provider', 'Firebase'); // or 'Microsoft' / 'Genow'

​
(2) Configuration and Attributes

You can configure the widget using HTML attributes. Dynamic updates to these attributes via JavaScript are supported.

​
Required Attributes

AttributeDescription
use-case-idThe ID of the use case you want to display.
api-endpointYour Genow API endpoint URL.
auth-providerThe name of the authentication provider.
auth-tokenThe current authentication token.

​
Optional Attributes

AttributeDescriptionDefault
selected-knowledge-asset-idsComma-separated list (e.g., “asset1, asset2”) of assets to query.All default assets
selected-thread-idPre-load a specific conversation thread.-
threads-page-sizeNumber of threads to load.1
llmLLM model name (e.g., “gemini-2.5-pro”).-
localeLanguage (“en” or “de”).“en”
environment”production” or “development”.“production”
use-shadow-domEncapsulates styles. Set to “false” if you want global styles to affect the widget.”true”

​
(3) Advanced Customization

If use-shadow-dom is enabled (default), you must use the custom-css attribute to override styles. You can override specific CSS variables for theming.
custom-css="
  #widget-root {
    --primary-color: #007bff;
    --primary-color-light: #00aaff;
    --primary-color-dark: #004cff;
  }
"

​
Example

​
Troubleshooting

Browser Compatibility: The widget supports modern browsers (Chrome, Firefox, Safari, Edge) and requires JavaScript to be enabled.
If you encounter issues, please check the following:
  • Widget not loading: Verify script paths for Vue and the UMD bundle.
  • Authentication errors: Verify the validity of your token and that the provider name matches the backend configuration.
  • Styling conflicts: If styles look wrong, try enabling Shadow DOM or adjusting your custom-css.
  • CORS errors: Ensure your API endpoint allows requests from your domain.
For multiple widget instances on the same page, ensure each has its own configuration. They operate independently.