Required Code - Allspice Labs Docs

Overview

On WordPress, the Allspice plugin adds the widget to your recipe pages. You install it once, connect it to your domain, and manage styles and behavior from the Publisher Portal and Settings → Allspice. Sites that don't run WordPress embed buttons by hand (see Custom Buttons).

Prerequisites

Your domain is added and verified in the Publisher Portal (see Domain verification).
Allspice's IP address, 34.171.197.31, is allowlisted in your firewall or security plugin. This is the Allowlist Allspice step in the portal's setup checklist. If a firewall blocks that address, Allspice can't read your recipe pages.
You have admin access to WordPress so you can install plugins.
Billing is set up for the domain in the Publisher Portal. Until it is, the plugin connects but shows a Premium subscription required notice and Allspice features stay off for that domain.

WordPress plugin integration

The plugin loads the Allspice widget and connects your site to your Allspice account. You don't write any JavaScript. Styles and behavior you set in the Publisher Portal sync to WordPress automatically.

1. Install the plugin

In the Publisher Portal, click your domain, open the WordPress tab, and click Download plugin (allspice.zip)
In WordPress, go to Plugins → Add New → Upload Plugin
Upload the zip and activate the plugin

The plugin isn't listed on WordPress.org. You only install it once; after that it updates itself from Allspice.

2. Connect the plugin to your domain

On the same WordPress tab in the portal, copy your Publisher ID, Domain ID, and Webhook Token. The Webhook Token is a secret, so treat it like a password.
In WordPress, open Settings → Allspice, paste the three values into the matching fields, and click Save Changes.
Click Sync All to pull your buttons, settings, and recipe list from Allspice.

After that, WordPress picks up Publisher Portal changes automatically about every 12 hours. To apply a change right away, click Sync Buttons & Settings (or Sync All) in Settings → Allspice.

3. Choose how the widget appears

New installs start on the recommended setup: the Floating style on desktop and Inline on mobile, with the adaptive rail. You don't need to place any buttons for that to work. See Widget Configuration to change styles and options.

TIP:

To try Allspice on a live site before launch, turn on Disable all Allspice output on the front end under Settings → Allspice → Status & Debug → Front End and enter one Demo page exception URL. Allspice then runs only on that page.

Optional: buttons

You don't need buttons. The recommended Floating (desktop) and Inline (mobile) styles, with the adaptive rail, add Allspice to your recipe pages automatically (see Widget Configuration).

If you want an extra entry point somewhere specific, such as a “Search recipes” link in your header, add a custom button. Create it in the Publisher Portal under Integrate → your domain → General tab → Button library → Create new button, and choose what it does there.

Premade buttons and their shortcodes belong to the older Overlay setup and are deprecated. They still work on existing sites; see Buttons & Entry Points and Blocks & Shortcodes.

Custom buttons

When To Use

Use the custom system when you want full control of the HTML + styling, for example:

a transparent overlay button
a custom icon button
a link-style button
a button inside your own theme builder

Contract (required)

Your clickable element must include:

HTML Attribute

data-allspice-id="YOUR_BUTTON_ID"

The action is pulled from Allspice and configured in your dashboard. You can apply any styling and markup you want. This works on <button>, <a>, <div>, <span>, etc.

Custom Button Example

<button data-allspice-id="WIDCON-abc123" class="allspice-custom-btn">
 <div class="left">
   <span class="badge">Allspice</span>
   <div class="text">
     <div class="title">Add ingredients</div>
     <div class="subtitle">To your grocery list</div>
   </div>
 </div>

 <svg
   class="arrow"
   width="16"
   height="16"
   viewBox="0 0 24 24"
   fill="none"
   aria-hidden="true"
 >
   <path
     d="M5 12h14M13 5l6 7-6 7"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
   />
 </svg>
</button>

No JavaScript or wrapper is required beyond the data-allspice-id attribute. You can add any classes and style these elements however you want.

The element must be on the page when Allspice loads. If your page builder renders it late, refresh once and test. If it still doesn't work, contact us about that builder.

Where Do I Get The Button ID?

In the Publisher Portal, go to Integrate, click your domain, and open the Button library on the General tab. Switch the view to Non-WordPress to copy a button's data-allspice-id attribute, or to WordPress for its shortcode.

Multiple Custom Buttons on One Page

Repeat the pattern as often as you like. Each button has its own ID, action, and styling.

HTML Attribute

<button data-allspice-id="WIDCON-123">Add to Grocery List</button>
<button data-allspice-id="WIDCON-456">Save Recipe</button>
<button data-allspice-id="WIDCON-789">Open Pantry</button>

Common Mistakes To Avoid

Adding your own click handler
Hardcoding an action in HTML
Reusing the same Button ID for different actions
Omitting or misspelling data-allspice-id or using the wrong button ID

Debug logging:

In WordPress, go to Settings → Allspice → Status & Debug and click Open Debug Mode. It opens your site with Allspice's debug logs printing to the browser console. Debug mode only works for logged-in administrators and needs the security token in that link, so adding ?allspice_debug=1 to a URL by hand won't turn it on.

Install the script / embed

On this page