Docs/full page chat

Full-page chat

Design a standalone, brandable AI page for your business — then link to it, embed it, or let it follow your site's language.

What it is

Every published chatbot also has a standalone, full-screen AI page at /chat/YOUR_BOT_ID. Instead of a small corner bubble, visitors get an immersive page with a large welcome heading, a prominent ask box and suggested questions. It is the same assistant as the widget — same training, same answers, same conversations — so there is no second chatbot to maintain.

→YOUR_BOT_ID is the same Bot ID as your embed script
→Public — visitors never need to log in
→Works as a direct link or inside an iframe on your own site

https://askgpt.asksol.pk/chat/YOUR_BOT_ID

Designing it

Open your chatbot and go to the AI Page tab. Settings are on the left, a live preview on the right; on smaller screens the preview becomes its own tab. The preview shows the real page, so what you see is what visitors get. Use the Welcome / Conversation toggle and the desktop / tablet / mobile widths to check both states before you save.

→General — name, avatar, logo, status text, greeting, placeholder, visible controls
→Theme — accent, background, cards, text and border colours
→Type — heading font, body font, heading size, italic accent word
→Welcome — eyebrow, heading, highlighted word, description, background
→Questions — suggested prompts
→Showcase — an optional band of content cards
→Figures — an optional dark band of key numbers
→Advanced — custom CSS (Enterprise)

Leave fields empty to inherit

Almost every field is optional. Leave one empty and it inherits from your Widget settings, then your chatbot, then the platform default — and the grey placeholder text shows you exactly what it will inherit. So if your widget is already named and branded, the full page matches it with no extra work, and renaming the widget later updates both. Fill a field in only when you want the page to differ from the widget. Image fields work the same way: the thumbnail shows the picture actually in use, even when it is one you set somewhere else, so an empty box always means no image anywhere.

💡Full-page setting → Widget setting → Chatbot record → Platform default.

Making it live

Two switches have to be on: the chatbot must be published on the Embed tab, and the full-page assistant must be enabled on AI Page → General. If either is off, visitors see a neutral 'Assistant unavailable' notice.

→Publish the chatbot (Embed tab)
→Enable the full-page assistant (AI Page → General)
→Open the public URL to confirm
→Send a test question

The welcome area

The first screen a visitor reads. The heading defaults to your greeting, so a page you never touch still says something sensible; set it separately when the page wants a different opening line to the bubble. One word of the heading is set in the display face's italic — name it yourself, or leave it empty and the last word is used.

→Eyebrow — the small uppercase label above the heading, hidden when a logo is set
→Heading, highlighted word and description
→Alignment — left or centred
→Background — a gradient generated from your accent, a flat colour, or your own image
→Focal point, darken and blur for an image background

💡Reach for darken or blur when the heading is hard to read against your photograph — they exist so a busy image can still carry type.

Colours and type

Theme sets eight colours: accent, page background, card surface, text, muted text, borders and the dark band behind the figures. Everything on the page — buttons, chips, the ask box, the rail controls — is derived from them, so changing the accent restyles the whole page rather than one element. Type pairs a heading face with a body face, at your chosen heading size.

→Set the accent first — most of the page follows from it
→Leave a colour empty to inherit your widget's palette
→Heading scale adjusts every heading together, not just the hero
→The italic accent word can be switched off entirely

Showcase section

An optional band of cards under the welcome area. You write the heading, so it works for any business — 'Explore our Products' for a shop, 'Our Services' for an agency, 'Popular Destinations' for a travel company, 'Our Courses' for a school. Only the title is required: a card with no image gets a generated panel in your brand colour, and a card with no link asks the assistant about itself instead.

→Title, description, image, link, button label and detail chips
→Drag to reorder, or use the up and down buttons
→Swipe rail or grid layout
→Up to 24 cards

How the cards look

Card style decides where the words go. 'Text below' puts the title under the photograph in your own text colour, which stays readable whatever you upload — it is the default for that reason. 'Text on image' lays white type over the picture: striking on dark, busy photography, and close to invisible on a pale product shot against a white backdrop. Either way every card in a row is the same height, so the rail reads as one band rather than a ragged edge.

→Text below — readable on any image, the safe default
→Text on image — use it when your photography is dark and consistent
→Show prices — the small chip under each card, where an imported product's price lands; turn it off for a catalogue you quote per project
→Scroll automatically — advances the swipe rail on its own, at the interval you choose

💡Auto-scroll pauses while someone is hovering, dragging or tabbing through the cards, and stays still altogether for visitors whose system asks for reduced motion. A grid has nothing to advance, so the control only appears for the swipe layout.

Import from WooCommerce

If your site runs WooCommerce, click 'Import from store' in the Showcase section to pull in your categories or products directly. It reads your store's public data, so there are no API keys to generate and nothing to connect. Pick what you want, and it becomes ordinary cards you can edit, reorder or delete. The WordPress plugin offers the same thing from the other end, under Explore Cards.

→Switch between Categories and Products
→Search to narrow the list
→Tick the ones you want and add them
→24 cards is the limit — the picker counts as you tick and stops you going over

💡Importing takes a snapshot — cards do not re-fetch on every page view. That keeps your assistant page fast even if your store is slow, and leaves you free to edit the wording. Re-import when your catalogue changes.

Key figures

An optional dark band of numbers — years in business, customers served, response time, whatever proves the point. Enter your own; the platform ships no default figures. The band appears only once you have switched it on and added at least one figure.

→Pick an icon, a value and a label for each
→Choose two, three or four columns
→Set the band colour, or inherit it from your theme

The conversation itself

Once a visitor asks something, the page becomes a conversation: a header with your assistant's mark and name, the transcript, and the composer. The mark uses your avatar; without one it falls back to your logo, and without either to the assistant's initials on your accent colour — so it is never an empty circle or a broken image.

→Status text — the line beside the green dot, e.g. 'Usually replies instantly'
→New chat — lets a visitor start over; can be hidden
→Image and voice input in the composer — can be hidden
→'Powered by AskGPT' — removable on Enterprise

Asking for contact details

Lead capture is configured on the chatbot itself and the full page honours it. Set to optional, a visitor is asked once and can skip; set to required, the first question waits until they leave an email. Either way the question they typed is answered the moment they continue — nothing has to be retyped.

→Off — no one is ever asked
→Optional — asked once, with a 'Skip for now'
→Required — an email is needed before the first answer
→The name field can be turned off, leaving email alone

Languages

The page speaks six languages: English, Spanish, French, German, Portuguese and Arabic — and Arabic lays the whole page out right-to-left. Which one it opens in follows the site it is embedded on. The WordPress plugin passes the language of the page being viewed, so on a WPML, Polylang or TranslatePress site your Arabic pages get an Arabic assistant and your English pages an English one, with nothing to configure. Opened directly, it follows the visitor's browser instead.

→Embedded — follows the host page's language automatically
→Opened directly — follows the browser's preferred language
→Any platform — add ?lang=ar to the /chat/ URL to set it yourself
→The visitor's own pick always wins, and sticks for the rest of their visit

💡Turn the visitor-facing language selector on under AI Page → General. It is off by default: a business serving one market gains nothing from it, and an unnecessary control is clutter.

What gets translated

Two different things happen. The interface AskGPT owns — buttons, errors, the contact prompt — comes from translations we maintain. Your own writing — the heading, the description, the ask-box placeholder, your suggested questions, your showcase cards — is translated for you and cached, so it is translated once and then served instantly to everyone after. Generated suggestions skip translation entirely: they are written in the visitor's language to begin with, which reads better than translating them afterwards.

→Interface text — from our own translations
→Your headings, descriptions, placeholder, cards and figures — translated and cached
→Generated questions — written in the visitor's language directly
→The assistant answers in whatever language it is being spoken to

💡Your assistant's name is left exactly as you wrote it — a brand is not translated. Nor is the hidden message behind a suggested question, so your knowledge is still searched in the language you wrote it in.

Adding it to your website

Link to it from a menu item, or embed it in a page on your own domain. In WordPress, install the AskGPT plugin (1.3.0 or later) and use the shortcode — everything else is handled for you, including passing the page's language, hiding the corner bubble so visitors don't see two chat interfaces, and sizing the frame. Leave the height off: the assistant measures itself and tells the page how tall it needs to be, matching the content on the welcome screen and the viewport once a conversation starts. A hard-coded height (a raw iframe at 135vh, say) is what leaves a slab of empty page underneath.

→WordPress — [askgpt_full_page] on its own; add height=\"800px\" only to override the automatic sizing, or lang=\"ar\" to pin one language
→Any other platform — paste the iframe and its script into a Custom HTML or Embed block; the script is what stops a fixed height leaving empty space
→Menu link — point it straight at your /chat/ URL

[askgpt_full_page]  [askgpt_full_page lang="ar"]  <iframe id="askgpt-frame" src="https://askgpt.asksol.pk/chat/YOUR_BOT_ID?lang=ar" title="AI Assistant" style="width:100%;height:100vh;border:0;display:block" allow="microphone"> </iframe> <script> // Sizes the frame to the assistant instead of a fixed guess. (function () { var f = document.getElementById('askgpt-frame'); var origin = 'https://askgpt.asksol.pk'; window.addEventListener('message', function (e) { if (e.origin !== origin || !f || e.source !== f.contentWindow) return; var d = e.data; if (!d || d.source !== 'askgpt' || d.type !== 'height') return; if (d.mode === 'landing') { var h = parseInt(d.height, 10); if (h > 0) f.style.height = Math.max(480, h) + 'px'; } else { f.style.height = Math.max(480, window.innerHeight) + 'px'; } }); })(); </script>

Switching language without a page reload

Most multilingual sites reload when someone changes language, and the assistant picks the new one up on its own. If yours switches in place — a single-page app, or a language menu wired to AJAX — tell the frame directly. It is ignored once the visitor has chosen a language for themselves, which is the behaviour you want: their pick should outlast your site's.

var frame = document.getElementById('askgpt-frame'); frame.contentWindow.postMessage( { type: 'askgpt:lang', lang: 'ar' }, 'https://askgpt.asksol.pk' );

What each plan includes

The full-page assistant and suggested questions are available on every plan. Design controls unlock as you move up. Controls above your plan are shown greyed out with the tier that unlocks them, so you can always see what is available.

→All plans — the full-page assistant and suggested questions
→Starter — colours and typography
→Growth — background image, showcase section, key figures, language selector
→Enterprise — remove AskGPT branding, custom CSS

Widget setup Platform embeds

Need more help?

Contact support and we'll get back to you within 24 hours.