xenial-black•2w ago
Embedded VAPI agent does not show icons in WordPress website
Hi there,
When I embed my VAPI AI agent into a WordPress website using the HTML code provided, the icons meant to show the following appear as solid-coloured squares and rectangles instead (see attached screenshots)
- Reset conversation
- Talk with AI
- Mute microphone
Here is the embed code - with the public key and assistant ID removed (I assume these are unnecessary information). Thanks in advance!
<vapi-widget
public-key=""
assistant-id=""
mode="voice"
theme="dark"
base-bg-color="#000000"
accent-color="#14B8A6"
cta-button-color="#000000"
cta-button-text-color="#ffffff"
border-radius="large"
size="full"
position="bottom-left"
title="Talk with AI"
start-button-text="Start"
end-button-text="End Call"
chat-first-message="Hey, How can I help you today?"
chat-placeholder="Type your message..."
voice-show-transcript="true"
consent-required="false"
></vapi-widget>
<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>
1 Reply
It looks like there could be conflicting theme configuration with your Wordpress site, whether that is HTML theme settings or CSS which are overlapping. To test this, try customizing the button colors to any other color, like #808080 and see if the buttons are still not showing any text. Another thing to try is removing the line that customizes the
cta-button-text-color . Let us know if that works for you