Skip to content

Tulo Shop Integration Methods

Target Audience: Developers, Stakeholders

Overview

Tulo Shop can be integrated using two methods: Redirect (standard hyperlink) or Embed (programmatic/JavaScript). The main difference is that embedding requires additional API user configuration by Tulo support.

How it works: Users click a standard link/button and are redirected to the Tulo Shop.

Implementation: 

<a href="https://your-shop.tulo.com">Visit Our Shop</a>

Requirements: - No special configuration needed - Works out of the box

Use when: You want simple integration and users can navigate away from your site.

Embed Method (Programmatic/JavaScript)

How it works: Tulo Shop is opened programmatically via JavaScript (iframe, modal, or programmatic navigation).

Implementation: 

<!-- Iframe embedding -->
<iframe src="https://your-shop.tulo.com" width="100%" height="600px"></iframe>

<!-- Programmatic opening -->
<button onclick="window.open('https://your-shop.tulo.com', '_blank')">
  Open Shop
</button>

Requirements:

API User Configuration Required

Your website domain must be added as an allowed origin to the Tulo Shop API user. This can only be done by Tulo support - contact them with your domain(s).

  • Allowed origins must include:
  • Full domain with protocol: https://www.example.com

  • All subdomains that will embed the shop

  • Why this is required:

  • Prevents CORS (Cross-Origin Resource Sharing) errors
  • Security measure to protect user data

Use when: You want seamless integration without users leaving your site (iframe, modal, or embedded experience).

Tulo Paywall - Embedded Shop

When using Tulo Paywall with embedded shop, allowed origins configuration is required since the shop is embedded programmatically. This is a common use case where the embed method applies.