AskWP

Make it
yours

Every color, icon, and dimension — configurable from the admin panel. No CSS knowledge required — but if you have it, there’s a custom CSS field waiting for you to go wild.

01 — Try it

Live
preview

Adjust the controls and watch the widget update in real time. This is exactly how it looks on your site.

Presets
Colors
Launcher Icon
Border Radius 0px
Sharp Soft
ASKWP DEMO ×
Hi! I can help you learn about AskWP and its features.
FEATURES FAQ
2m ago
How does RAG work?
just now
AskWP searches your pages, posts, and FAQs automatically on every message.
just now
+ Type your message…
02 — Layout

Pixel-perfect
control

Position, size, and shape the widget to fit your site exactly. All settings live in the Appearance tab of the admin panel.

Position

Bottom-right or bottom-left. The widget stays in its configured corner on all screen sizes.

bottom-right

Width

Configurable from 300px to 500px. Pick the size that works for your content and layout.

380px

Border Radius

From 0 (sharp corners) to 24px (soft and rounded). Applied to the panel and message bubbles.

12px

Z-Index

Adjustable stacking order for sites with other fixed overlays competing for the same space.

999999
Aa

Font Family

Leave empty to inherit your site’s font, or specify a custom font stack.

inherit

Bot Avatar

Upload a custom image via the media library. Appears next to every bot message in the chat.

none
03 — Override

Custom
CSS

For advanced customization, the Appearance tab includes a CSS textarea. Styles you write are injected after the widget’s defaults — you can override anything.

All widget elements use the .askwp- prefix. Clean namespacing means your overrides won’t leak into the rest of your site.

selectors 
/* Key CSS selectors */

.askwp-widget        /* outer container   */
.askwp-launcher      /* floating button    */
.askwp-panel         /* chat panel         */
.askwp-panel-header  /* header bar         */
.askwp-chat-list     /* message container  */
.askwp-msg-assistant /* bot messages       */
.askwp-msg-user      /* user messages      */
.askwp-input-row     /* input area         */
04 — Mobile

Bottom-sheet
on mobile

On viewports under 640px, the chat panel automatically switches to a bottom-sheet layout. It slides up from the bottom of the screen with a backdrop overlay — no configuration needed.

The mobile layout supports touch gestures and feels native on phones. The launcher button stays in its configured position.

<640px Breakpoint
Auto Detection
Touch Gestures
9:41
Hi! How can I help?
What plans do you offer?
AskWP is free and open source.
+ Type a message…