Widget Usage Options

How and where to display the Gist AI search box and Gist AI answers

There are two types of decisions to make when implementing Gist Answers:

  1. How to display the Gist AI search box (floating vs inline on a web page)
  2. How to display the Gist AI answer(in a modal vs on a standalone new page)

In all cases, the widgets will scale to fit either the desktop or mobile view of your website. Your widget theme can be customized to match your brand fonts and color palette. Light or dark mode settings are also available to meet your users' needs.

How to display the Gist AI search box

The Gist AI search box serves as your users' entry point into Gist Answers.

The Gist AI search box can be placed on any web page where users may want to ask an AI question, whether it's your home page, landing pages, or article pages. The search box can be displayed as either floating or inline within the web page.


Floating Gist search box (easiest)

The floating Gist AI search box is pinned at the bottom center of your web page, where it's always accessible to your users even when they scroll.

  • Benefits
    • Always visible — More likely to be used; pinned at the bottom of the browser as user scrolls.
    • Lightweight integration — Doesn’t require you to modify your website layout.
    • Good for mobile — Thumb-accessible at the bottom of mobile screens.
  • Considerations
    • May feel intrusive — If so, use it on pages where users are most likely to engage with AI search, such as article pages.
    • Performance risk — Floating elements can affect page performance or conflict with other pinned UI elements on your site.

Alt text

Fig 1: The floating Gist AI search box, pinned at the bottom center of the browser (desktop and mobile).


Inline Gist AI search box

The inline Gist AI search box is integrated into your web page as content that scrolls off screen like your other web content.

  • Recommended page placements for the inline Gist AI search box

    • Home page
      • Right beneath the global navigation header (see Fig 2 below).
      • Above or below a list of featured articles, trending topics, or any other home page content for which users may have AI questions.
    • Article pages
      • Next to articles in the right rail, where users can ask an AI question to engage with the article content (see Fig 3 below).
      • Within or at the bottom of an article where they are more likely to have questions to ask (see Fig 4 below).

    💡

    Note:

    If there is already a site search box on your web page, do not place a Gist AI search box near it without very clearly labeling how the two search boxes are different. Seeing two search boxes at the same time can create confusion for your user.


  • Benefits

    • Feels like part of your site layout — Blends seamlessly into existing UI (e.g., header or sidebar).
    • Predictable user behavior — Users are familiar with inline search boxes on web pages.
  • Considerations

    • Requires layout changes — May need dev support to integrate into existing web templates.
    • Less visible and accessible — Can be missed if buried in a crowded layout or when scrolled off screen.

Alt text

Fig 2: The inline Gist AI search box placed at the top of an article page (desktop).


Alt text

Fig 3: The inline Gist AI search box placed with other content in the right rail, alongside an article (desktop).


Alt text

Fig 4: The inline Gist AI search box placed at either the top of a page or within an article (mobile).



How to display Gist AI answers

A Gist AI answer contains the full response to a user's search query, content attribution for sources, and an "Ask a follow-up" prompt box that allows the user to ask additional questions related to their query.

Gist AI answers can be displayed in either a modal or on a new standalone web page.


Modal display of Gist AI answers (easiest)

A modal window containing a Gist AI answer expands out of a floating Gist AI search box at the bottom center of the browser (see Figs 5 and 6 below). A user can get questions answered without having to leave the current web page.

💡

Note:

The modal display of Gist AI answers is available only when you use a floating Gist AI search box.

  • Benefits
    • Fast and seamless — No page reload when delivering answers to queries.
    • Keeps user on page — Avoids disrupting session or navigation flow.
    • Better for content discovery — Easy to toggle between AI answers and underlying publisher content.
  • Considerations
    • May conflict with site modals — The Gist AI answer modal could interfere with other modal boxes used by your site.
    • Accessibility challenges — Requires careful handling for screen readers and focus traps.

Alt text

Fig 5: The modal display of a Gist AI answer (desktop).


Alt text

Fig 6: The modal display of a Gist AI answer (mobile).



Standalone page for Gist AI answers

Gist AI answers can also appear on a standalone web page (see Fig 7 below).

  • The standalone Gist AI answer page can be triggered by either a floating or inline Gist AI search box.
  • Your branding and global site navigation should be included on the standalone page to provide a consistent user experience.
  • The Gist Attribution bar and source card carousel is required if you're using Gist Content Network sources other than your own publication to answer AI questions at your website.

  • Benefits
    • Full-page experience on desktop — More space to interact with AI answer content.
  • Considerations
    • Navigation disruption — Takes users to a new page after they submit their AI question.
    • Integration effort — Publishers must set up routing, templates, etc.
Alt text

Fig 7: The Gist AI answer on a standalone web page (desktop).



Easiest setup for most publishers


#1: Floating Gist AI search box with AI answer displayed in a modal

  • Why:
    • Low integration effort — Especially appealing to long-tail publishers.
    • Fast time to value — No need to touch templates or reroute pages.
    • Higher usage — Always-visible box increases engagement.
    • Minimally disruptive — Keeps users on-site, avoids extra navigation.

#2: Floating Gist AI search box with AI answer displayed on a standalone page

  • Why:
    • If you need more space for monetization and branding around your AI answers, use the standalone page option which offers more real estate.