# Drupal

The HIVO Connector is a plugin that helps you directly integrate your HIVO digital asset library into your Drupal content management system. Instead of having to download images, videos, or documents from HIVO to your computer and then re-upload them to Drupal, you can access and use them instantly from a single location.

👉 The latest version of the plugin now supports with **Drupal version 9 || 10 || 11*****.*** To use this feature, you need to follow these simple steps:

## How to Activate the Module

#### 🔹 Step 1: Install the Module

Currently, Drupal provides two main versions for users to choose from:

* **Dev (Development version):** designed for developers.
* **Drupal CMS Launcher:** a standalone desktop application (Windows/macOS) that allows you to launch Drupal directly on your computer without the need for complex environment setup.

Due to the different nature of each version, the installation process will vary slightly. Please follow the detailed instructions below to proceed with the version you are using.

* If you are using the **Developer version**, you will need to install this module by running the command:

```
composer require 'drupal/hivo_connector:^1.0'
```

* If you use **Drupal CMS Launcher**: **Navigate to Extend > Browse Modules tab.** 
  * In the Search bar, enter the keyword HIVO and **turn OFF** the toggle ***"Only show projects covered by a security policy"*****.** 
  * You will see HIVO Connector, click the **"Install"** button to start the installation process.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FuMO6MdO0qE2ePmFftxwn%2FGroup%20808.png?alt=media&#x26;token=67663483-5242-4ede-b4af-6dac499a6351" alt=""><figcaption></figcaption></figure>

#### 🔹 Step 2: Activate the Module

After installation, you need to activate the module. Find and check the box for **"HIVO Connector**" in the list of modules to activate it.

* With **Developer version**: **Navigate to Manage > Extend**

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FCBfB6zzmfLOIovfRnzkE%2FGroup%20802.png?alt=media&#x26;token=c4a138eb-cfc0-4160-8c6c-407451e8f74d" alt=""><figcaption></figcaption></figure>

* With **Drupal CMS Launcher**: **Navigate to Extend > List tab** (Install button in the top right corner)

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2F4uIq9nzfzROZGHCNHSoF%2FGroup%20809.png?alt=media&#x26;token=a3d2469b-e50d-4168-ad16-cb6d3a34bd80" alt=""><figcaption></figcaption></figure>

## How to use HIVO Connector

**HIVO** supports **two methods** to bring assets from the HIVO system into **Drupal** for use in content or web pages:&#x20;

* **Import assets from HIVO into the Drupal Media Library**
* **Use CDN link (Embed URL)**

### **1. Import assets from HIVO into the Drupal Media**

#### 🔹 Step 1:  Log In HIVO

When the module is activated, you will see a **new "Hivo Connector" tab**. Click this tab and use the email and password for your HIVO account to log in.

* With **Developer version:**

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FhuY0yjS4F0F3eGUbiaBy%2FGroup%20805.png?alt=media&#x26;token=5e225502-f077-4457-b4ea-685a6956d9f4" alt=""><figcaption></figcaption></figure>

* With **Drupal CMS Launcher**

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2F8mTgZnChMttwGjAYw9Fw%2FGroup%20810.png?alt=media&#x26;token=83e6e1d7-0c8c-45ff-abae-61babe88f26b" alt=""><figcaption></figcaption></figure>

#### 🔹 Step 2: I**mport assets from HIVO into the Drupal Media**

After successfully logging in, you can access your entire HIVO library.&#x20;

* Use the search bar to find the assets you need.&#x20;
* Select the **asset** and **version** you want to import.
* Once imported, the asset will appear in the Drupal Media and can be inserted into your content like any other media item.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FoEvVQaXaBl3wfnoEpo5Z%2FGroup%20811.png?alt=media&#x26;token=fe3e25da-59b6-49ce-ade5-c9407768c9e9" alt=""><figcaption></figcaption></figure>

### **2. Use Assset CDN link (Embed URL)**

This is a **faster and more flexible** method that allows you to embed assets directly from HIVO **without uploading them to Drupal’s Media Library**.

> #### ⚠️ **Important Note:**
>
> The account must be configured with a CDN URL first, or else the "URL" column will\
> not be available. Please contact HIVO Support to configure a CDN URL.

#### 2. 1. Methods to Embed HIVO Assets

You can use either of the following methods to display HIVO content within Drupal:

* **Method 1: Using the HIVO Connector (In-editor)** – Best for quickly embedding content directly into your articles.
* **Method 2: Using Remote Video (via Public CDN)** – Best for embedding videos using a direct link from HIVO (requires CDN configuration).

#### 2.2. How to set up to use CDN link

🔹 **Step 1: Enable configuration**

* Go to: **Configuration → Content Authoring → Text formats & editors**

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FqQhOFepvBX73K5XeOMLb%2FGroup%20812%20(1).png?alt=media&#x26;token=19751868-b132-4de5-b0d7-718378c9e8d7" alt=""><figcaption></figcaption></figure>

* **Select the text format to configure:** Click **Configure** for the text format you want to enable (e.g., *Full HTML*).

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2F2B0FWuodiw5Z8Exwvm9y%2FGroup%20813%20(1).png?alt=media&#x26;token=586f15b1-fbda-44c1-bd72-b0c1d627de92" alt=""><figcaption></figcaption></figure>

🔹 **Step 2: Add the HIVO button to the toolbar**

Under Toolbar Configuration:

* Drag and drop the **HIVO icon** from **Available buttons** into the **Active toolbar** area.
* Purpose: this allows users to access the HIVO library directly within Drupal’s text editor.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FpF1BQkfvpSuj8mQRxrRG%2FGroup%20816.png?alt=media&#x26;token=081e3a4f-b127-4dc4-aa61-3ab07ddd2b76" alt=""><figcaption></figcaption></figure>

🔹 **Step 3: Enable “Enabled filters”**

* Scroll down to the **Enabled filters** section and ensure that the **“Embed media”** option is turned on. If not enabled, the CDN link will not display correctly in your content.
* Other options can be flexibly enabled or disabled according to your requirements.&#x20;

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FwGEPcYWCr9kgC5ZtyAGX%2FGroup%20815%20(1).png?alt=media&#x26;token=a7e7034c-6ff6-4274-9a3d-090128008b56" alt=""><figcaption></figcaption></figure>

🔹 **Step 4: Save configuration**

* Click **Save Configuration**.
* Then click **Save Text formats and editors** to finalize the setup.

#### **2.3 How to use Assset CDN link**

#### 👉 **Medthod 1: How to use HIVO Connector in the content editor**

After completing the setup:

* In Drupal’s text editor, you will now see the **HIVO icon** in the **Action bar**.
* Click the **HIVO icon**:
  * If you’re **not logged in**, a login window will appear → Log in with your HIVO account.
  * Once logged in, the **HIVO library** will open.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2Fuseo7bT3qVluKBqcyYGe%2FGroup%20818.png?alt=media&#x26;token=c768c97a-7e00-45e5-b2d6-0adf9567e0d7" alt=""><figcaption></figcaption></figure>

* Select the **asset** and **version** you want to embed, then click **Embed URL** to insert it into your content.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FX542knQyGUqUCkA1D6aQ%2FGroup%20817.png?alt=media&#x26;token=8dc83350-7786-4ee6-9c0c-8d2710aff746" alt=""><figcaption></figcaption></figure>

#### 👉 **Medthod 2:  Using Remote Video (via Public CDN)**&#x20;

*This method allows you to embed image/video directly from HIVO without uploading them to Drupal’s Media Library.*

⚠️ Important Note: Your account must be configured with a CDN URL first. If you do not see this option, please contact HIVO Support to configure a CDN URL.

* Go to **Content → Add content → Media**

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FZgs8FHwE4op9lbz8SIaL%2FGroup%20899.png?alt=media&#x26;token=dcef9f51-0d9f-4617-a9bd-b99ec7cce721" alt=""><figcaption></figcaption></figure>

* The dialog **"Add or select Media"** will appear, click the **Remote Video** option.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2Fce2MT5PYAxVzTc4ihP3z%2FGroup%20896%20(1).png?alt=media&#x26;token=b2877788-d651-4e9b-8fd2-d15a76ebb2fa" alt=""><figcaption></figcaption></figure>

* When prompted to enter the URL for the Remote Video:
  * Log in to your HIVO account, then locate the image/video you wish to use.&#x20;
  * Enable the public CDN option corresponding to your desired version and Copy the Public CDN URL of that image/video.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FRPvJoZKZLPL8QfWCzREE%2FGroup%20900.png?alt=media&#x26;token=796a0bbc-9563-4ceb-a94d-ed3076d72c0a" alt=""><figcaption></figcaption></figure>

* Paste the link into the URL field within the *Remote Video* section in Drupal.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FfcGdwxN1q3I5LouUy9ht%2FGroup%20897%20(1).png?alt=media&#x26;token=3d44b491-ec3a-4aed-9a44-15be92f297bf" alt=""><figcaption></figcaption></figure>

* The system will automatically recognize and display the image/video from the CDN link you provided. Then, you need click **"Save and insert"** button to insert the image/video into the post.

<figure><img src="https://2446612760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0sjg5GpIPr5HzBTJYqYe%2Fuploads%2FbdEzOsh7K1wthe2j4905%2FGroup%20902.png?alt=media&#x26;token=c3a1b408-a126-466e-b563-107e4113caf0" alt=""><figcaption></figcaption></figure>

If you have any questions, don't hesitate to ask, we're always here to help!