ElevenAgents in Ghost
Learn how to deploy a ElevenLabs agent to Ghost
This tutorial will guide you through adding your ElevenLabs Agents agent to your Ghost website.
Prerequisites
Section titled “Prerequisites”- An ElevenLabs Agents agent created following this guide
- A Ghost website (paid plan or self-hosted)
- Access to Ghost admin panel
There are two ways to add the widget to your Ghost site:
Get your embed code
Visit the ElevenLabs dashboard and copy your agent’s html widget.
HTML <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>Choose your implementation
Option A: Add globally (all pages)
- Go to Ghost Admin > Settings > Code Injection
- Paste the code into Site Footer
- Save changes
Option B: Add to specific pages
- Edit your desired page/post
- Click the + sign to add an HTML block
- Paste your agent’s html widget from step 1 into the HTML block. Make sure to fill in the agent-id attribute correctly.
- Save and publish
Test the integration
- Visit your Ghost website
- Verify the widget appears and functions correctly
- Test on different devices and browsers
Troubleshooting
Section titled “Troubleshooting”If the widget isn’t appearing, verify:
- The code is correctly placed in either Code Injection or HTML block
- Your Ghost plan supports custom code
- No JavaScript conflicts with other scripts
Next steps
Section titled “Next steps”Now that you have added your ElevenLabs agent to Ghost, you can:
- Customize the widget in the ElevenLabs dashboard to match your brand
- Add additional languages
- Add advanced functionality like tools & knowledge base