Required Code — Allspice Labs Docs

Overview

The Allspice integration adds interactive features to your site, including recipe saving, grocery list actions, meal planning, and more. This section covers displaying the Allspice widgets and buttons on your recipe pages.

Allspice supports two implementation paths:

WordPress sites - via the Allspice WordPress Plugin
Non-WordPress sites - via manual embedding

Prerequisites

Your domain must be verified
You must be able to edit page templates, blocks, or HTML
You must have admin access to install plugins

WordPress Plugin Integration

For WordPress sites, Allspice provides an official plugin that injects the Allspice widget code, handles authentication and attribution, provides configurable buttons and placement options, and requires no custom Javascript. This is the recommended approach for WordPress sites. Button styles and behavior are managed in Allspice - your WordPress site automatically stays in sync.

1. Installing the Plugin

Install the Plugin

Download the allspice.zip file
In WordPress, go to Plugins → Add New → Upload Plugin
Upload the zip and activate the plugin

Activate Buttons

In the Allspice Publisher Portal, navigate to the Integrate tab, and open the Settings page for this domain. Press Create New to activate a button. You can choose one of the premade styles, or select a custom style if you'd like to build the UI yourself.

Configure Plugin Settings

In WordPress, open Settings → Allspice to access the plugin settings. Copy the following items from the Publisher Portal Settings page for this domain and paste them into the corresponding fields in the plugin settings.

Partner ID
Domain ID
Webhook Token

Then, press Save. Button styles and configuration are synced automatically. Updates made through the Publisher Portal are re-synced every 6 hours. For changes to take effect immediately, use the "Refresh" button in the plugin settings page.

TIP:

For changes to take effect immediately, use the "Refresh" button in the plugin settings page after saving changes in the Publisher Portal.

Allspice Buttons

The Allspice widget supports two ways to add buttons to your site. In both cases, the action that happens on click is configured in your Allspice dashboard, not in your site code.

Premade Buttons (recommended) - You place a shortcode where you want the button. Allspice renders the button for you
Custom Buttons - You design any element (button, link, div, image, etc.). You only add a class that contains your Allspice Button ID, and Allspice wires up the click behavior.

1. Premade Buttons

For premade buttons, you insert a shortcode onto any page or post, which creates a placeholder slot which our plugin automatically replaces with the correct button design and action.

Shortcode

[allspice_button id=YOUR_BUTTON_ID reserve_w="220" reserve_h="45"]

2. 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:

Class

class="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 class="allspice-id--WIDCON-abc123 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, special attributes, or wrapper are required. You can style these buttons however you want.

The element must be present on the page when Allspice loads. If you render the element late (some page builders do this), refresh once and test. If it still doesn't work, contact us and we'll advise on that specific builder.

Where Do I Get The Button ID?

Go to the Integrate tab, open domain, open domain settings, copy button ID.

Multiple Custom Buttons on One Page

You can repeat this pattern as many times as you want. Each button has its own ID, can trigger a different action, and can be styled differently.

Class

<button class="allspice-id--WIDCON-123">Add to Grocery List</button>
<button class="allspice-id--WIDCON-456">Save Recipe</button>
<button class="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
Removing the allspice-id-- prefix