Embedding the Menu

Home → Documentation → Embedding the Menu

Embedding the Menu

Overview:
The Embed feature generates a secure, responsive iframe snippet that renders your menu on any website. Unlike standard iframes, the Stolik Embed includes a smart helper script that automatically adjusts the height of the menu to eliminate ugly scrollbars.

Note: This is a Stolik PRO feature. It allows you to display your live menu on external websites (partner hotels, food portals, blogs) while managing content centrally in WordPress.

WordPress dashboard showing the Stolik Menu PRO embed generator, featuring language selection, template styles, secure token validity, and optional backlink settings.

Generating an Embed Code

To create an embed snippet, navigate to Stolik → Embed in your WordPress dashboard.

Use the generator to customize how the menu will appear on the external site:

  • Language: Select which published language version of your menu to display. Status badges will help you ensure you are embedding a live page.
  • Template & Style: Choose the visual theme for the embedded menu. You can either use the language’s custom style or force it to use a clean, default template to better match the partner’s website.
  • Token Validity: Security is built-in. Choose how long this specific embed link should remain valid (Week, Month, Year, or Custom). Once the token expires, the menu will stop displaying on the external site.
  • Advanced (Embed ID): Customize the HTML ID for the iframe. This helps with auto-resizing and allows developers to target the menu with external CSS/JS if multiple menus are embedded on one page.
  • Optional Link: Add a small localized link back to your restaurant’s main website beneath the menu (e.g., “View on our Website”). This is excellent for attribution when partners host your menu.

Once configured, click the Generate embed code button to create your secure snippet.

Using the Snippet

The generator provides a block of HTML and JavaScript. Copy the entire code block and paste it into the external website’s HTML source code.

Example Snippet:

<iframe id="stolik-embed-en_US" src="https://your-restaurant.com/?stolik_embed=token123..." style="width:100%; border:0; min-height:560px;" scrolling="no" loading="lazy"> </iframe> <script> // Stolik Auto-Resizer Script // ... handles height negotiation ... </script>

How it works:

  • The Iframe: Loads your menu content without the WordPress admin bar or website header/footer. It only displays the menu card.
  • The Script: Communicates securely with the iframe. When a user opens a category (expanding the menu), the script tells the host page to increase the iframe’s height.

Placement Tip: Place the snippet inside a container (div) on your partner’s site. The iframe will automatically fill 100% of the width of that container, while the script handles the height.

Managing Access (Security)

The Embed system uses Secure Tokens. This prevents unauthorized sites from framing your content.

  • Revoking Access: If you want to stop all external embeds from working immediately, you can click “Rotate secret (revoke all)” in the Embed dashboard. This invalidates all existing snippets.
  • Expiration: Snippets will automatically stop working after the expiration date you selected during generation.

Partner Embeds (QR Only)

If a partner (e.g., a graphic designer printing flyers) needs direct access to your QR code image rather than the full menu, you can provide them with a direct image link instead of an iframe.

Formats

  • https://your-site.com/stolik-qr?locale=en_US&format=svg&scale=2
  • format: png (raster) or svg (vector, PRO only).
  • scale: 1 to 4 (increases resolution for PNGs).