Overview
This guide explains how to integrate the Inclusif accessibility widget into your website or application. The Inclusif widget can be integrated in three ways:
Web Component - Direct integration on your website.
WordPress Plugin - Easy installation for WordPress sites.
Google Tag Manager Template - Script-free integration via GTM.
Web Component Integration
Prerequisites
Before you begin, ensure you have:
A website or web application where you want to add the accessibility widget
Basic knowledge of HTML
Admin access to modify your website's code
Installation Methods
Method 1: Integration of CDN script (Recommended)
The simplest way to add the Inclusif widget to your website is by using our CDN:
<script>
(function(w,d,s,o,f,js,fjs){
w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
js=d.createElement(s), fjs=d.getElementsByTagName(s)[0];
js.src="https://plugin.inclusif.life/widget.js";
js.async=1;
fjs.parentNode.insertBefore(js, fjs);
})(window, document, 'script', 'Inclusif');
Inclusif('init', {
apiKey: 'YOUR_API_KEY',
language: 'es',
position: 'bottom-right'
});
</script>
Important: Replace YOUR_API_KEY with the API key provided when you registered for the Inclusif service.
Configuration Options
Required Attributes
Attribute | Type | Description |
apiKey | String | Your unique API key for the Inclusif service |
language | String | The language for the widget: |
Optional Attributes
Attribute | Type | Description | Default |
position | String | Widget position: |
|
WordPress Plugin Integration
The WordPress plugin provides an easy way to add the Inclusif widget to your WordPress site.
System Requirements
WordPress: 6.7 or higher (tested with 6.8.2)
PHP: 7.4 or higher (tested with 8.2.27)
Installation Steps
Download the plugin from: https://wordpress.com/plugins/inclusif-widget
Install via WordPress admin interface, or copy the zip file contents to
wp-content/pluginsActivate the plugin through the WordPress admin
Google Tag Manager (GTM) Template
If your website already uses Google Tag Manager, you can integrate the Inclusif widget without modifying your site's source code. This method is especially useful for marketing or analytics teams who manage scripts through GTM.
Installation Steps
Access GTM
Log in to your Google Tag Manager account
Navigate to your desired Container
Add the Template
Open the Templates section from the left menu
Click Search Gallery
Search for "Inclusif Accessibility Widget"
Add the template to your container
Configure the Tag
Create a new Tag using the Inclusif template
Set your API Key (provided by Inclusif)
Configure the Language (
esoren)Optionally set the Position (defaults to
bottom-right)
Set Trigger and Publish
Choose a Trigger (e.g., "All Pages")
Save and Publish your container
Example Configuration
Setting | Value | Notes |
API Key |
| Required - provided by Inclusif |
Language |
| Required |
Position |
| Optional - see position options above |
Troubleshooting
Conflicts with Other Libraries
If you experience conflicts with other libraries or frameworks:
Script Placement: Try moving the Inclusif script tags to the end of your
<body>tagVersion Check: Ensure you're using the latest version of the Inclusif widget
Support: Contact our support team with details about the conflict
Updates and Maintenance
📋 Automatic Updates
The widget is regularly updated with new features and improvements.
Changelog
Stay informed about the latest features and improvements through our regular updates.