# Wordpress

## Introduction

In this tutorial, we will guide you step-by-step on how to integrate your Caleida AI Agent into WordPress. Please note that for this integration, you must have a *Creator* account or higher in WordPress.

## 1. Installation

To start, go to **Integrations>Advanced** in the Caleida Dashboard, look for the WordPress integration, and click **Configuration**. Here you will find all the necessary data for the integration.

The first thing you need to do is download the compressed file of the plugin.

<figure><img src="/files/S02KpasT26Q7GFLIdlmo" alt=""><figcaption></figcaption></figure>

In your WordPress Administration Panel, go to **Plugins**, located at the bottom left of your screen.

<figure><img src="/files/7q3whi25VgYCC7hacTFI" alt=""><figcaption></figcaption></figure>

Click the **Upload Plugin** button. Choose the compressed file previously downloaded from the Caleida Dashboard and click **Install Now**.

<figure><img src="/files/xzZpmYWEzYUkcniTXrDv" alt=""><figcaption></figcaption></figure>

After installation, click **Activate Plugin**.

<figure><img src="/files/CJI9Eu50dc0JEaTLAHPI" alt=""><figcaption></figcaption></figure>

## 2. Accessing the Configuration

Once activated, you will see a new item in the WordPress sidebar menu called **Caleida Settings**. Click on **Caleida Settings** to access the plugin configuration.

<figure><img src="/files/Mvs454ZUE1OERyWZMMVv" alt=""><figcaption></figcaption></figure>

## **3. Agent Configuration**

Next, you need to fill in the configuration fields. All this information is provided by Caleida. You can find it in the WordPress configuration section under **Integrations>Advanced** in the Caleida Dashboard. Simply copy each piece of information and paste it into the corresponding field.

<figure><img src="/files/HpJ3UQSy86g9Y6ZNBJ80" alt=""><figcaption></figcaption></figure>

* **Project ID**: Enter the Project ID of your Caleida Agent.
* **Verification Token**: Enter the Verification Token associated with your Caleida Agent project.
* **Enable Floating**: Check this box if you want the Agent to float on the page.
* **Iframe Width**: Set the desired width for the Agent's iframe.
* **Iframe Height**: Set the desired height for the Agent's iframe.
* **Iframe Style**: Enter additional CSS styles for the iframe (optional).

Once done, click the **Save Changes** button to save your configuration.

<figure><img src="/files/5fdixMeeJvVdvnZARsHo" alt=""><figcaption></figcaption></figure>

## **4. Embedding the Agent in Posts or Pages**

To embed your AI Agent in posts or pages, use the shortcode \[caleida] in the posts or pages where you want to embed the Agent.

Simply add a new shortcode block on the page where you want to embed it and write *\[caleida].*

For more information about **shortcodes**, you can access the following [link](https://wordpress.com/support/wordpress-editor/blocks/shortcode-block/).

<figure><img src="/files/qlKPuhqAgwfLZm38IjRb" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/OrZocxiKhUN8oK8Ldz1s" alt=""><figcaption></figcaption></figure>

## **5. Verify the Agent Display**

After adding the shortcode \[caleida] to your posts or pages, visit the corresponding pages on your website to verify the Agent's display.

Make sure the Agent is embedded according to the settings you established in the plugin configuration.

<figure><img src="/files/uLQLkAQnkaH3FAtqAvnQ" alt=""><figcaption></figcaption></figure>

## **6. Customize the Style (Optional)**

If you want to further customize the appearance of the Agent, consider adjusting the **Iframe Style** settings.

This setting allows you to apply additional CSS styles to the iframe, giving you the flexibility to match the Agent's appearance with your website's design.

Experiment with different styles to achieve the desired visual impact.

## **7. Customize the Floating Agent (Optional)**

If you opted to enable the **Enable Floating** option in the configuration, the Agent will appear in a floating position on your website.

Customize the floating behavior by adjusting parameters such as position, height, and width in the **Floating Configuration** section of the settings.

This feature provides a dynamic and attractive way for users to interact with the Agent.

###

## **8. Additional Tips**

* To temporarily disable the Agent, you can comment out or remove the shortcode \[caleida] from specific posts or pages.
* Regularly review user comments and interactions to adjust your Agent settings and improve the overall user experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.caleida.io/integrations/wordpress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.