Skip to main content

Google Tag Manager Integration

· 4 min read
Mauro Garcia
Mauro Garcia
Front End Engineer

Integrating Serenity Chat into your website using Google Tag Manager (GTM) is straightforward and allows you to add the chat component without modifying your website's code directly. This guide will walk you through the simple steps to set up GTM if it's not already installed, and then show you how to add and configure the Serenity Chat custom tag.

Step 1: Add Google Tag Manager to Your Website​

Before adding the Serenity Chat tag, you need to ensure GTM is installed on your website. Here’s a quick setup guide if you haven’t done this yet:

  1. Create a GTM Account:

    • Visit the Google Tag Manager website and sign in.
    • Create a new GTM account by providing your account name and container details.

  2. Get the GTM Script Snippet:

    • After setting up your container, GTM will provide you with a JavaScript snippet.
    • You’ll need to paste this into your website: one part goes in the <head> section, and the other immediately after the opening <body> tag.

  3. Install the Snippet on Your Website:

    • Add the GTM snippet to the appropriate sections of your website’s HTML, ensuring it's included on all the pages where you want to use GTM.

      Google Tag Manager - Code Snippets

Once the GTM code is in place, you’re ready to start adding tags.

Step 2: Add the Serenity Chat Custom Tag​

Now that GTM is installed, you can add the Serenity Chat tag to integrate the chat tool into your site. Follow these steps to configure it:

  1. Open Your GTM Workspace:

    • In Google Tag Manager, open the Workspace you want to use.

  2. Create a New Tag:

    • Go to the Tags section and click on New to create a new tag. Add Tag
    • In the Tag Configuration box, click to open the Choose Tag Type panel.

  3. Discover the Serenity Chat Template:

    • In the panel, click on the option Discover more tag types in the Community Template Gallery. Add Tag

    • This will open the Community Template Gallery. Use the search bar to filter for "Serenity Chat". Add Tag

    • Once you find the Serenity Chat tag, click on Choose Template. Add Tag

  4. Configure the Serenity Chat Tag:

    • After selecting the template, you’ll see the configuration fields.
    • Enter your API Key and agentCode in the required fields. Add Tag

  5. Set Up a Trigger:

    • Scroll down to the Triggering section and click Triggering.
    • For most users, it’s recommended to select Page View and apply it to All Pages. This ensures that the chat will appear on every page of your site. Add Tag

  6. Save the Tag:

    • After configuring the tag and trigger, give your tag a descriptive name (e.g., "Serenity Chat Tag") and click Save.

Step 3: Publish Your Changes​

After you’ve configured and saved the Serenity Chat tag, you need to publish your changes for them to take effect:

  1. Preview Your Changes:

    • Before publishing, click Preview in GTM to test the tag. This will open a debug mode where you can verify that the Serenity Chat widget is working as expected on your site. Add Tag

  2. Submit and Publish:

    • Once you’ve confirmed that everything works, click the Submit button. Add Tag
    • Add a description of your changes (e.g., "Added Serenity Chat tag").
    • Finally, click Publish to push the changes live to your website.

Conclusion​

By following these steps, you can easily integrate Serenity Chat into your website using Google Tag Manager. This allows you to deploy the chat functionality quickly and manage it through GTM without editing your site’s code directly. Once live, your chat widget will be available for users to interact with.

For any issues or additional customizations, be sure to consult the GTM or Serenity Chat documentation.

How to integrate Assistants with external APIs

· 5 min read
Máximo Flugelman
Máximo Flugelman
Project Manager

With Serenity* Star AI Hub, you can add plugins to an Agent so you can send HTTP Requests to an external API. This can be useful if you want to collect user information using the Serenity* Chat Component

Let's implement a simple agent that will do the following:

  • Ask the user for they Name, Last Name and Phone Number
  • Once all data is provided, an HTTP POST request will be sent to an external API that will register the user and return a User ID.
  • Inform the user that their registration was successful and return the User ID.

Prerequisites​

You should have an API endpoint that allows for sending data using the following format in the body:

{
    "name": "",
    "lastName":"",
    "phoneNumber:
}

And its response has the following structure:

{
  "userId": ""
}

Creating an Assistant Agent to chat with the user.​

First, create our Assistant Agent that will chat with the user. An Assistant, is a type of agent that allows you to interact with the user without having to deal with the complexity of the conversation flow. You just send the user's input to the agent, and it will return the response taking into account the context of the conversation.

If you want to learn more about assistant agents, checkout Assistant Agent

  1. Navigate to the Serenity* platform.
  2. On the Sidebar, go to agents and on this menu, select "New agent" at the top right. You will be taken Serena creation chat, we will skip this step, press on "Create Manually" and select "Assistant Agent" Access to agent grid Select create manually Select assistant agent

The form will have several tabs, General, Model, Skills, Parameters, Knowledge, Behaviour.

General Tab​

In the General tab, fill the form with the following fields:

  • Name: A descriptive name of the agent, in this case, we will use User Registration Bot
  • Code: A unique code to identify the agent, we will use registration-bot
  • Description: A short description of what the agent does, in this case, we will use This agent will gather user information and store it in an external API
  • Avatar (Optional): You can upload an image that will represent the agent.

Behaviour tab​

  • Initial Bot Message: This is the first message that the agent will send to the user. In this case, we will use Hello! I'm here to help you register in our platform. Please provide me with your Name, Last Name and Phone Number.

  • Personality: Here we have to tell the agent what we want to do. In this case, we want to gather users information, we will be using the advanced mode. Open the advanced mode and set the following prompt

    Your goal is to register users in our platform, for this you have to retrieve and store user data.
    The data you must retrive is:

    - Name
    - Last Name
    - Phone Number

    Prompt the user to gather this information.
    Once you have all the information. You must store the user data through an httpp request with the following body format:

    {
        "name": "",
        "lastName":"",
        "phoneNumber:
    }

    If the storage is correct, you should return the userId you have received. If its incorrect, reply "It's not posible to store the information right now"

    Extended view of agents personality

Skills Tab​

  1. Click on "Add Skills" Add skills option

  2. Add the Http Request Plugin: alt text

Configuring the Plugin​

Fill out the form for the API configurations on the side panel wizard. Set up the authorization of your API, and complete de required fields.

In this example we will be using a mock server with no authorization so we only need to fill out the description and URI.

Description: This field should contain a description of what the endpoint does or the goal of the http request as the AI will use it to decide wether or not to make the call.

Body: As the body will be filled by the agent, we can leave it empty

URI: The endpoint of the request we will be using

Finally our Http Request Plugin looks something like this Configuration of the http request plugin Configuration of the http request plugin

Testing the Assistant​

Finish by clicking on the "Create" button. You will be redirected to the agent's list.

Search for the agent an open it.

At this point, the assistant is ready, so let's try it out by writing on the preview window.

Asking the agent to register Agents response and succesfull registration

We can additionaly take a look at the mock server to make sure the request was succesfully received.

alt text

Great! It seems like the Agent has successfully sent the gathered data to the API and received a response.

Wrapping it up​

  • Agents can make API calls by including the HTTP Request Skill
  • The plugin description should be comprehensive so that the agents can identify when to call it, specially when more than one call is configured.
  • The agent can retrieve an create a body from the conversation with the user
  • For better results, use Open AI Models when using this skills.
  • Http Request can manage various types of authorization depending on the endpoint requirements

Welcome

· One min read
Mauro Garcia
Mauro Garcia
Front End Engineer

Welcome to Serenity AI Hub Blog! This is the place where we share news, updates, and insights about our products, features, and more.

Stay tuned for the latest information and announcements. We're excited to have you here! 🚀

How to incorporate chat in Wordpress

· 3 min read
Uriel Volman
Uriel Volman
FullStack Engineer

The Serenity Chat module allows you to quickly integrate your agents into your site.

This module is designed to be as simple as possible to integrate, and it provides a simple API to customize it to your needs.

This article will guide you through the process of adding the Serenity Chat module to a Wordpress site.

If you want to learn more about this module, checkout Serenity Chat module

Getting code snippets for my agent​

To add a new instance of the chat component, you'll need to add the following resources to your HTML file:

  • Link to the Serenity Chat CSS & JS files
  • Empty HTML element that will be replaced by the chat
  • Component initialization script

  1. Go to Serenity* AI Hub and select the agent type you want to use.

    image

  2. Inside the list of agents, filter by the name of the agent you want to use and press the edit button.

    image

  3. Once in the Agent Designer screen, click on the "Code Snippets" button in the top right corner.

    image

  4. Once in the code snippets you will find a selector where you can choose between different options.

    image

  5. Select JavaScript code language.

    image

  6. Copy the fragments provided.

    image

Installing the required Wordpress plugins​

Once we got the code snippets, we'll need to visit our WordPress dashboard. image

  1. In the wordpress dashboard, we will go to plugins. image

  2. Before incorporating the chat, we must verify that we have installed the plugin "Simple Custom CSS and JS".

    image

  3. In case you do not have the plugin, click the "Add new plugin" button in the sidebar.

    image

  4. Type "Simple Custom CSS and JS" in the search box.

    image

  5. Press "Install Now" and then "Activate".

    image

  6. After activation the "Custom CSS & JS" option will appear in the sidebar.

    image

Adding code snippets to Wordpress​

With the plugin activated, it's now time to add the code snippets for the chat component. Once we're done, the chat will be displayed in the bottom right corner of the screen.

image

To add the snippets we must go to the "Custom CSS & JS" option in the Wordpress sidebar, and then use the "Add HTML Code" and "Add JS Code" buttons. image

Adding CSS & HTML snippets​

  1. Go to "Custom CSS & JS", and then click on "Add HTML Code"

  2. Give it a title and paste in the code box the snippets specified below

    <!-- Empty div to replace with the chat -->
    <div id="aihub-chat"></div>

    <!-- Serenity Chat resources -->
    <script src="https://hub.serenitystar.ai/resources/chat.js"></script>
    <link
      rel="stylesheet"
      href="https://hub.serenitystar.ai/resources/chat.css"
    />

  3. Publish the code image

Adding the JS code​

  1. Go to "Custom CSS & JS", and then click on "Add JS Code".

  2. Give it a title and paste in the code box the snippets specified below

    document.addEventListener("DOMContentLoaded", function () {
      const chat = new AIHubChat("aihub-chat", {
         apiKey: "<Your API key>",
         agentCode: "<Your Agent Code>",
         baseURL: "https://api.serenitystar.ai/api",
      }
      chat.init();
    );

  3. Publish the code image

Once these changes have been made, the chat component should be displayed on the Wordpress site. image

Conclusion​

In this article, we've learned how to add the Serenity Chat module to a Wordpress site. This module allows you to quickly integrate your agents into your site, and it provides a simple API to customize it to your needs.

If you want to learn more about this module, checkout Serenity Chat module