Wordpress
How to integrate in Wordpress.
Last updated
How to integrate in Wordpress.
Last updated
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.
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.
In your WordPress Administration Panel, go to Plugins, located at the bottom left of your screen.
Click the Upload Plugin button. Choose the compressed file previously downloaded from the Caleida Dashboard and click Install Now.
After installation, click Activate Plugin.
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.
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.
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.
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.
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.
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.
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.
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.
