Setting up the RunConcierge
widget on your Drupal Website
RunConcierge can be added to a Drupal site with just two lines of code. No custom modules or development work required.
This guide walks you through the most common and reliable way to integrate the widget on a Drupal 11 site.
What you’ll need:
Your event key (we’ll use an example below)
Access to your Drupal admin dashboard
Permission to edit site settings or page content
If, after going through the steps below, you are still unable to see and interact with the RunConcierge widget on your site, please reach out to [email protected] and we will work together to make sure the widget is implemented successfully.
Step 1: Add the RunConcierge loader to your site
In Drupal, the safest and most future-proof approach is to add the script globally, so it’s available on any page where you want to place the widget.
Option A (recommended): Add the script via theme
If you have access to the theme files:
Navigate to your active theme directory.
Open html.html.twig.
Inside the <head> section, add:
Save the file and clear caches.
(Administration → Configuration → Development → Performance → Clear all caches)
This loads the RunConcierge app on every page of your site.
Option B: Add the script via Drupal settings (no file editing)
If you don’t want to touch theme files:
Go to Configuration → Development → Performance.
Under Advanced CSS/JS aggregation, make sure JavaScript aggregation does not block external ES modules.
Install a trusted module like Asset Injector.
Add a new JavaScript asset.
Paste:
Set it to load on all pages.
Save and clear caches.
Step 2: Place the widget on a page
Once the loader is present, adding the widget is easy.
Add the widget to a page or post:
Go to Content → Add content (or edit an existing page).
In the editor, add a Custom HTML or Source block (depending on your editor configuration).
Paste:
In the code, replace "YOUR-EVENT-KEY" with your race's unique event key (example: f36e753c-fbb7-4281-85cf-d44c5cfeba95). Your final code will look something like this:
Save the page.
6. Clear caches if needed.
View the published page.
The RunConcierge widget should appear exactly where you placed the tag.
Adding the widget to multiple pages:
You can repeat Step 2 on any page where you want the widget to appear. No additional configuration is required.
Troubleshooting: If the editor removes the <search-bar> tag
Some Drupal setups restrict custom HTML tags in content. If that happens, use one of these alternatives:
Option A: Place the widget via a block
Go to Structure → Block layout.
Add a Custom block.
In the block body, switch to Source view.
Paste:
In the code, replace "YOUR-EVENT-KEY" with your race's unique event key (example: f36e753c-fbb7-4281-85cf-d44c5cfeba95). Your final code will look something like this:
Place the block in the desired region.
Set visibility rules if needed (only certain pages).
Save and clear caches.
Option B: Allow the custom tag
If you have admin permissions:
Go to Configuration → Content authoring → Text formats and editors.
Edit the text format used on your page (e.g. “Full HTML”).
Ensure:
HTML tags are allowed
The tag
search-baris not stripped
Save configuration.
If, after going through the steps above, you are still unable to see and interact with the RunConcierge widget on your site, please reach out to [email protected] and we will work together to make sure the widget is implemented successfully.