Copy page

Frameworks

WordPress

To integrate Preo Widget with WordPress, you can use the built-in Custom HTML block in the Gutenberg editor or register the SDK script via your theme's functions.php for site-wide availability.

Quick Start — Custom HTML Block

The simplest approach. No plugins or code changes required.

1. Open or create a Page (or Post) in the WordPress Block Editor (Gutenberg)
2. Add a Custom HTML block where you want the storefront to appear
3. Paste the following code:

Code
<script src="https://edge.preo.cloud/c/[email protected]/components.umd.js"></script>
<preo-storefront sdk-id="prod:eu:yourorg:edt_xxxxx"></preo-storefront>

4. Replace prod:eu:yourorg:edt_xxxxx with your actual SDK ID
5. Publish or Update the page — the storefront widget will render on the frontend

This method loads the SDK script only on the page where the block is placed, which is ideal if you need the widget on a single page.

Site-wide Script Registration

If you plan to use the widget on multiple pages, it's better to register the SDK script globally via your theme so it is loaded once and cached by the browser.

Add the following to your theme's functions.php (or a child theme's functions.php):

Code
function preo_enqueue_sdk() {
    wp_enqueue_script(
        'preo-sdk',
        'https://edge.preo.cloud/c/[email protected]/components.umd.js',
        array(),
        '0.6',
        true // load in footer
    );
}
add_action('wp_enqueue_scripts', 'preo_enqueue_sdk');

After registering the script, you only need the widget tag in your Custom HTML blocks — without the <script> tag:

Code
<preo-storefront sdk-id="prod:eu:yourorg:edt_xxxxx"></preo-storefront>

Shortcode

You can create a WordPress shortcode to make it easier for editors to embed the widget without writing HTML.

Add the following to your theme's functions.php:

Code
function preo_enqueue_sdk() {
    wp_enqueue_script(
        'preo-sdk',
        'https://edge.preo.cloud/c/[email protected]/components.umd.js',
        array(),
        '0.6',
        true
    );
}
add_action('wp_enqueue_scripts', 'preo_enqueue_sdk');

function preo_storefront_shortcode($atts) {
    $atts = shortcode_atts(array(
        'sdk-id'   => '',
        'locale'   => '',
        'color-brand' => '',
    ), $atts, 'preo_storefront');

    if (empty($atts['sdk-id'])) {
        return '<!-- Preo: sdk-id attribute is required -->';
    }

    $attributes = 'sdk-id="' . esc_attr($atts['sdk-id']) . '"';

    if (!empty($atts['locale'])) {
        $attributes .= ' locale="' . esc_attr($atts['locale']) . '"';
    }

    if (!empty($atts['color-brand'])) {
        $attributes .= ' color-brand="' . esc_attr($atts['color-brand']) . '"';
    }

    return '<preo-storefront ' . $attributes . '></preo-storefront>';
}
add_shortcode('preo_storefront', 'preo_storefront_shortcode');

Then use the shortcode in any page or post:

Code
[preo_storefront sdk-id="prod:eu:yourorg:edt_xxxxx"]

Or with additional options:

Code
[preo_storefront sdk-id="prod:eu:yourorg:edt_xxxxx" locale="da" color-brand="#E91E63"]

You can extend the shortcode to support more attributes from the Options reference.

Page Template (Advanced)

For full control over layout and styling, create a dedicated page template in your theme.

1. Create a file page-preo-storefront.php in your theme directory:

Code
<?php
/**
 * Template Name: Preo Storefront
 */

get_header(); ?>

<main id="primary" class="site-main">
    <div class="preo-storefront-container" style="max-width: 1200px; margin: 0 auto; padding: 20px;">
        <preo-storefront
            sdk-id="prod:eu:yourorg:edt_xxxxx"
            locale="en"
            sticky-summary
            scroll-into-view
        ></preo-storefront>
    </div>
</main>

<?php get_footer(); ?>

2. In the WordPress admin, create a new Page and select Preo Storefront from the Template dropdown in the page settings sidebar

Troubleshooting

Widget not rendering

• Verify the page is viewed on the frontend (not the editor preview). The Custom HTML block preview in Gutenberg may not execute scripts.
• Ensure no caching plugin is stripping or deferring the SDK script. If using a cache/optimization plugin (WP Rocket, Autoptimize, etc.), exclude edge.preo.cloud from script optimization.

Widget appears unstyled or broken

• Check that your theme's CSS is not overriding the widget styles. The Preo widget uses Shadow DOM, but aggressive global styles like * { all: unset; } can interfere.
• Ensure the container element has sufficient width — the widget is responsive but needs at least ~320px.

Script blocked by security plugin

• If you use a Content Security Policy (CSP) or security plugin, allow https://edge.preo.cloud as a script source.

For a full reference of available widget attributes, see the Options page.