Skip to main content

Overview

Add your Invent AI assistant to any Drupal website with a floating bubble. Perfect for enterprise websites, government sites, and large-scale content platforms.

Installation

1

Create Custom Block

Navigate to StructureBlock layoutCustom block libraryAdd custom block
2

Choose Full HTML Format

  • Give your block a description (e.g., “Invent Assistant”)
  • Set Text format to Full HTML
  • Switch to Source mode in the editor
3

Add the Code

Paste this code:
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
Replace YOUR_ASSISTANT_ID with your actual assistant ID.
4

Save and Place Block

Save the block, then place it in a region (usually Footer or Page bottom)
5

Configure Visibility

Configure block visibility settings if needed (all pages, specific pages, etc.)

Method 2: Theme Template

Add directly to your theme’s template files:
{# in your theme's html.html.twig or page.html.twig #}
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

Method 3: Using a Module

Create a custom module or use an existing one:
<?php
// invent_assistant.module

/**
 * Implements hook_page_attachments().
 */
function invent_assistant_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'invent-assistant',
      '#attributes' => [
        'assistant-id' => 'YOUR_ASSISTANT_ID',
      ],
    ],
    'invent_assistant',
  ];

  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#attributes' => [
        'src' => 'https://www.useinvent.com/button.js',
        'async' => TRUE,
        'defer' => TRUE,
      ],
    ],
    'invent_assistant_script',
  ];
}

Customization

Match Your Drupal Theme

<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  theme-appearance="auto"
  theme-button-background-color="#0678BE"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>

Conditional Display by Content Type

Using block visibility settings:
  1. Edit your Invent Assistant block
  2. Go to Visibility tab
  3. Add conditions for Content types, Pages, or Roles
Or in a custom module:
function invent_assistant_page_attachments(array &$attachments) {
  $node = \Drupal::routeMatch()->getParameter('node');

  // Only show on article nodes
  if ($node && $node->getType() == 'article') {
    // Add assistant code
  }
}

User Authentication

Security Requirement: When using any user-* attributes (user-id, user-name, user-avatar), you must also provide user-hash. Both user-id and user-hash must be provided together, or neither should be provided. The user-hash must be generated on your backend using HMAC-SHA256 with your assistant’s secret key. Never expose the secret key to the client.
Pass Drupal user information to your assistant for personalized experiences:
<?php
// In your theme or custom module

function invent_assistant_page_attachments(array &$attachments) {
  $current_user = \Drupal::currentUser();

  if ($current_user->isAuthenticated()) {
    $secret_key = \Drupal::config('invent_assistant.settings')->get('secret_key');
    $user_id = (string) $current_user->id();
    $user_name = $current_user->getDisplayName();
    $user_hash = hash_hmac('sha256', $user_id, $secret_key);

    $attachments['#attached']['html_head'][] = [
      [
        '#type' => 'html_tag',
        '#tag' => 'invent-assistant',
        '#attributes' => [
          'assistant-id' => 'YOUR_ASSISTANT_ID',
          'user-id' => $user_id,
          'user-name' => $user_name,
          'user-hash' => $user_hash,
        ],
      ],
      'invent_assistant',
    ];
  }
}

Drupal Commerce Integration

For e-commerce sites:
  • Product support and questions
  • Order tracking assistance
  • Shipping information
  • Returns and refunds help

Tips for Drupal

Drupal 9 & 10

Fully compatible with modern Drupal versions

Multilingual

Works with Drupal’s multilingual system

Paragraphs

Can be added as a paragraph type

Layout Builder

Compatible with Layout Builder

Advanced Configuration

Add to Specific Regions

In your theme:
# your_theme.info.yml
regions:
  header: Header
  content: Content
  sidebar: Sidebar
  footer: Footer
  invent_assistant: 'Invent Assistant'

Cache Considerations

Clear Drupal caches after adding the assistant:
drush cr
# or
drush cache-rebuild

Performance Optimization

Use async/defer attributes (already included) and consider using Drupal’s aggregation:
$attachments['#attached']['library'][] = 'your_module/invent-assistant';

Troubleshooting

Solutions:
  • Clear all Drupal caches (Configuration → Performance → Clear all caches)
  • Verify text format is set to “Full HTML”
  • Check block placement and region
  • Ensure block is enabled and visible
Solutions:
  • Check for JavaScript conflicts in browser console
  • Adjust block weight/order
  • Test with minimal theme/modules
Solutions:
  • Check block visibility permissions
  • Verify “Anonymous user” role can see the block
  • Check cache settings for anonymous users

Drupal Version Compatibility

  • Drupal 7: Use Block system or theme templates
  • Drupal 8/9/10: All methods supported
  • Drupal 11: Fully compatible (when released)
Works with:
  • Acquia Lightning
  • OpenSocial
  • Commerce Kickstart
  • Panopoly
  • Thunder
  • And all other Drupal distributions