Widget style, placement, and branding

Overview

This page covers how the Allspice widget looks on desktop and mobile and which pages it appears on.

If you manage multiple domains, each domain has independent settings.

Prerequisites

• Your domain must be verified
• The Allspice WordPress plugin must be installed and active (see WordPress Plugin)
• You need admin access to WordPress and access to the Publisher Portal

Where settings live

Widget configuration is split between two places:

Getting portal changes onto your site

WordPress picks up portal changes automatically within about 12 hours. To apply them right away, open Settings → Allspice in WordPress and click Sync Buttons & Settings (or Sync All). Changes made in the plugin itself apply as soon as you save.

Widget style

In Settings → Allspice, Widget Style (Desktop) and Widget Style (Mobile) choose what readers get on each device. Screens 767 px wide or narrower count as mobile.

• New installs default to Floating on desktop and Inline on mobile. Existing sites keep their current style until you change it.
• Inline needs a recipe card. The widget is placed above the first visible recipe card (WP Recipe Maker, or an element with id="recipe"). On pages without one, such as your homepage, readers get the floating widget instead.
• On pages that aren't recipes, the rail becomes a Find a Recipe search button.

Options for each style

These options appear under each device's Widget Style and are set separately for desktop and mobile. Options that don't apply to the selected style are hidden.

Show the inline “Ask Pico” bar above the recipe card

A compact ask bar above the recipe card that opens the widget. On by default and recommended. With the Inline style it's always on, because it's the widget's entry point.

Search buttons open

• Full-page widget (default, recommended)
• This device's widget style (Floating or Inline)
• Standalone search page on this site (/advanced-search/). Also requires Search replacement to be on in the portal, and falls back to the full-page widget until the page is published. See Advanced search.

Devices set to Overlay always open search in the full-page widget.

Open the floating widget automatically

Floating style only. Opens the widget card on its own after a delay you choose (3 to 600 seconds, default 30). Off by default, and applies on desktop only.

Inline block

Floating and Inline styles. Styles the block that holds the inline widget and Ask Pico bar:

• Border color (default light gray) and border width: No border, 1 px (default), or 2 px
• Corners: Square, 8, 12, 16 (default), or 24 px
• Top spacing and Bottom spacing: 0 to 60 px (default 14)

Adaptive rail

With the Floating and Inline styles, a compact rail on the edge of the screen changes with the reader's position in the post, showing the action that fits that part of the page. Readers can drag it up or down.

The Adaptive rail panel for each device controls:

• Position: Right edge (default) or Left edge; Top, Middle (default), or Bottom
• Size: Default or Small
• Shell: Light (default), Dark, or Auto (match the visitor's light/dark setting)
• Accents: a color for each state (Jump to Recipe, Grocery List, Start Cooking, Search, Ask Me Anything)
• Announce: when the rail briefly shows its label as readers scroll: Once per section (default), Only “Jump to Recipe”, or Never, and for how long (default 4 seconds)
• Announce the search rail on non-recipe pages (on by default)
• Behavior: pulse the icon to draw attention, expand on hover (desktop), and show “Jump to Recipe” at the top of the page (all on by default)

Full-page widget

The Full-Page Widget setting has one option: Minimize overlay (search only). When checked, the full-page widget opened from the Floating or Inline styles shows search only: no Groceries, Pantry, Meal Plan, or Help tabs, and search results open the post directly. It's off by default and applies to both devices.

The setting is hidden when both devices use the Overlay style.

Theme & branding

On the portal's General tab:

• Current theme - click to pick or add a color pair. Each theme has a primary and secondary color, and each can be a solid color or a linear gradient. Newly added themes may show as Pending before you can select them.
• Site name - the name shown to readers for your site.
• Domain logos - a square logo (up to 256×256) and a rectangular logo (up to 600×200).
• Chatbot logo - the assistant's mark in chat headers (see Chat Customization).
• Ad provider - Mediavine, Raptive, or Other, so ads keep showing inside the widget.
• Show saved recipes - where readers' saved recipes appear: Never, Chat only, Saved library only, or Chat & saved library.
• Keep screen awake - Guided cooking only (default) or While using Allspice.

Theme and branding settings affect Allspice's own UI only. They never change your site's styles.

Where Allspice appears

Page visibility

In the Allspice search card, Page visibility controls where the widget and launcher appear:

• All pages except the listed paths, or Only pages under the listed paths
• A path covers everything under it. / means the homepage only.
• With no paths listed, Allspice can appear on every page.

Search settings on the same card (AI search, search replacement, articles in search) are covered in Search.

Turning Allspice off on your site

In WordPress, Settings → Allspice → Status & Debug → Front End has Disable all Allspice output on the front end. Add a Demo page exception URL to keep Allspice running on one page, which is useful for testing on a live site before launch. Recipe syncing continues while the front end is off.

Generated pages

The plugin's Pages section can create a Search, Membership, and Meal Plans page. Each is created as a draft for you to review and publish. Once a page exists, its Regenerate Default button (for example Regenerate Default Search Page) moves the current page, including your edits, to the Trash and creates a fresh draft.

Buttons & entry points (deprecated)

There are two kinds of entry point: premade buttons and blocks you create in the portal's Button library (General tab), and custom elements on your site that you map to an Allspice action in the portal.

Premade entry points

These are ready-made UI patterns. Create them per domain in the Button library and place them where your theme or recipe card allows - no hand-built markup for the button itself. Inline premades can be placed automatically (Top of post, After introduction, After first section, Above recipe card, Under recipe card, or End of post), and so can the Floating Button. Everything else is placed manually with a block or shortcode.

Allspice Rail (overlay style)

The classic rail for devices using the Overlay widget style. (Floating and Inline styles use the adaptive rail instead.) It floats on the edge of the screen and changes with scroll position to offer the action that fits where the reader is in the post. Readers can dismiss it (×) for the rest of the session, expand or collapse it (for example to show the “Ask Me Anything” field), and drag it so it never covers what they want to read.

Four automatic states:

1. Jump to Recipe - top of the post, before the recipe card. Header “Recipe tools”, CTA scrolls to the recipe card.
2. Ask Me Anything - mid-article. Header “Recipe assistant”; expands to an AI question field without leaving the page.
3. Build Grocery List - near ingredients. Header “Plan & shop”; opens the grocery and meal-planning flow.
4. Start Cooking - near instructions. Header “Cook mode”; launches step-by-step Cook Mode.

Floating Button (overlay style)

A small circular control with the Allspice leaf, fixed to the left or right edge of the viewport - always visible while scrolling. It offers one fixed action, unlike the Rail's scroll-based states. Placement can be automatic.

Cooking CTA

An inline coral banner in the post flow - usually above the recipe card or near the top. It pairs Start Cooking and Plan & Shop with a bookmark control and a short tagline.

Allspice Overview

An inline block, typically between the article and the recipe card. It can surface Key Points (AI bullets), a visual ingredients strip with grocery selection, and an Ask me about this recipe bar. You can tune which parts show and match colors to your brand.

Action Bar

Built for WP Recipe Maker: two full-width coral buttons side by side - Cook step-by-step and Build grocery list - plus a bookmark icon. It's wider than the Guided Cooking button because it shows both actions at once. Add it in the WP Recipe Maker template (often between ingredients and instructions).

Groceries Button

A prominent full-width Build a grocery list button above the ingredients in the recipe card.

Guided Cooking Button

A template-placed control inside the recipe card (above or below the instructions heading works well) that launches Cook Mode for step-by-step guidance.

Custom HTML entry points

For your own buttons, nav items, or banners, add a data-allspice-id attribute to any element and choose its action in the Publisher Portal (per domain). That lets you match your typography, spacing, and layout while still opening the right Allspice surface.

You can:

• use your own buttons and site styling
• integrate Allspice into custom layouts and site navigation
• launch specific Allspice views on demand

Examples:

• a “Chat with Allspice” control in your header
• a “Build grocery list” CTA on your homepage
• a “Search recipes” item in your nav
• a “Meal plans” promo on a landing page

Setup:

• add a data-allspice-id attribute with your button's ID to an element on your site
• assign the element’s action in the Publisher Portal (domain-scoped)

Custom buttons in the Required Code docs →