Embedding SerenityGPT search components

This guide explains how to embed SerenityGPT search components into your applications and custom web pages. Follow these steps to integrate the SerenityGPT platform search functionality seamlessly into your site.

Basic integration

To add the SerenityGPT search widget to your webpage:

1. Add the following script tags to your HTML file:

<script>
var SERENITY_WIDGET = {
    api_url: "https://ask.serenitygpt.com/api/v2/",
    api_token: "<your-token-here>"
};
</script>
<script type="module" src="https://js.serenitygpt.com/widget.js"></script>

1. Insert a container element where you want the search widget to appear:

<div id="serenity"></div>

Configuration options

Popup display

To show results in a popup window:

<script>
var SERENITY_WIDGET = {
    api_url: "https://ask.serenitygpt.com/api/v2/",
    api_token: "<your-token-here>",
    popup: true
};
</script>

Split layout

To separate the input field and results:

<script>
var SERENITY_WIDGET = {
    api_url: "https://ask.serenitygpt.com/api/v2/",
    api_token: "<your-token-here>",
    split: true
};
</script>

Then, use these container elements in your HTML:

<div id="serenity-input"></div>
<!-- Other content -->
<div id="serenity-results"></div>

Styling

You can customize the appearance of the search components using CSS classes. Here's a reference for the available styling options:

Main container

• .serenity-body: Styles the body of the page containing the SerenityGPT widget.

Widget components

• .serenity-widget: Styles the main SerenityGPT widget container.
• .serenity-input-widget: Styles the input component of the widget.
• .serenity-results-widget: Styles the results component of the widget.

Layout

• .serenity-layout: Styles the layout container for the widget and surrounding content.
• .serenity-table: Styles the table used for layout purposes.
• .serenity-column: Styles all columns in the layout.
• .serenity-input-column: Styles the column containing the input widget.
• .serenity-content-column: Styles the column containing the main content.
• .serenity-results-column: Styles the column containing the results widget.

Content elements

• .serenity-image: Styles images within the SerenityGPT content area.
• .serenity-text: Styles text paragraphs within the SerenityGPT content area.

To customize the appearance, you can add your own CSS rules targeting these classes. For example:

.serenity-body {
    background-color: #f0f0f0;
}

.serenity-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.serenity-input-widget {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

.serenity-results-widget {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
}

You can adjust these styles to match your website's design and branding.

Important notes

• Authentication: The component currently uses an API key. User-specific authentication depends on your configuration. See note about advanced authentication below.
• Rate limiting: The component doesn't currently notify users when they exceed a configured rate limit. This feature will be available for a future release.
• Error handling: Errors appear as plain text below the search box.

Summary

In this guide, you learned how to:

• Embed SerenityGPT search components into your custom apps and web pages.
• Configure basic integration with script tags and container elements.
• Set up popup display and split layout options.
• Customize the appearance of search components using CSS classes.

By following these instructions, you can integrate SerenityGPT's search functionality seamlessly into your website or application, enhancing your users' search experience while maintaining consistency with your own styling guidelines or design system.