How to add the ElevenLabs Conversational AI widget to your Ghost website

Looking to take your Ghost website to the next level? ElevenLabs’ Conversational AI transforms customer engagement. By adding ElevenLabs’ Conversational AI to your Ghost platform, you can offer interactive, lifelike customer support conversations that bring your audience closer to your brand.

Before you get started

Before you start, ensure you have the following:

1. A Ghost website: You need a paid plan or self-hosted Ghost instance. Custom JavaScript is not supported on Ghost’s free plan.
2. Access to the Ghost admin panel: You’ll need access to either the Code Injection settings or the Editor.
3. An ElevenLabs account: Configure a Conversational AI agent and copy its JavaScript embed code.

Step-by-step guide

Option 1: Adding the widget globally using Code Injection

If you want the widget to appear on all pages of your website, use Ghost's Code Injection feature.

Step 1: Prepare your widget

1. Log in to your ElevenLabs account.
2. Navigate to the Conversational AI section and configure your agent.
3. Copy the provided JavaScript embed code.

Step 2: Access Code Injection settings

1. Log in to your Ghost Admin Panel.
2. Navigate to Settings > Code Injection.

Step 3: Embed the JavaScript code

1. Paste the copied JavaScript code into the Site Footer field.
2. Save your changes.

Step 4: Test the integration

1. Open your Ghost website to ensure the widget appears and functions as expected.
2. If it doesn’t display, double-check the code placement and your ElevenLabs configuration.

Option 2: Adding the widget to specific pages or posts using the plus sign

If you prefer the widget to appear only on certain pages or posts, you can embed it directly in the content using the plus sign in Ghost’s Editor.

Step 1: Prepare your widget

1. Copy the JavaScript embed code from your ElevenLabs account.

Step 2: Edit a post or page in Ghost

1. Open the Ghost Editor for the page or post where you want to add the widget.
2. Click the plus sign (+) to open the block menu.

Step 3: Insert an HTML Block

1. Select HTML from the block options.
2. Paste the JavaScript code into the HTML block.

Step 4: Publish and test

1. Save and publish the page or post.
2. Open the page to confirm the widget displays and works as expected.

Common issues and troubleshooting

Integration not working as expected? Follow these steps below to resolve the issues you're facing. 

Issue 1: Widget not loading

• Cause: JavaScript code is incorrectly added or incomplete.
• Solution: Double-check the placement of the code and confirm that your ElevenLabs agent is properly configured.

Issue 2: Script conflicts

• Cause: Other custom scripts in the Code Injection settings may conflict with the widget.
• Solution: Temporarily disable other scripts to test for conflicts. Re-add them one by one to identify the problem.

Advanced tips

Looking for more ways to customize the widget? Check out the tips below for help. 

• Customizing widget placement: Use CSS to adjust the widget’s appearance or position when added through Code Injection or the HTML block. If you want the widget to appear in a consistent location (e.g., footer or sidebar), edit your Ghost theme files. Add the JavaScript embed code to the default.hbs file, then re-upload your theme.
• Mobile responsiveness: Test the widget on mobile devices to ensure it scales and functions properly. Use Ghost’s responsive preview or test directly on physical devices.
• Cross-browser testing: Verify the widget works across popular browsers, including Chrome, Firefox, Safari, and Edge, to ensure consistency for all users.
• Debugging JavaScript issues: Use browser developer tools (e.g., Chrome DevTools) to inspect any errors in the Console. Fix issues such as missing dependencies or script conflicts.

Final thoughts

Integrating the ElevenLabs Conversational AI widget into Ghost is simple and flexible, allowing you to enhance your website’s interactivity with minimal effort. If you encounter issues, revisit the steps, test thoroughly, or contact ElevenLabs support if needed.

Sign up for Conversational AI today to get started.