# 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:

```html
<script src="https://edge.preo.cloud/c/components@0.6/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`):

```php
function preo_enqueue_sdk() {
    wp_enqueue_script(
        'preo-sdk',
        'https://edge.preo.cloud/c/components@0.6/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:

```html
<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`:

```php
function preo_enqueue_sdk() {
    wp_enqueue_script(
        'preo-sdk',
        'https://edge.preo.cloud/c/components@0.6/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:

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

Or with additional options:

```
[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](/integration/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:

```php
<?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](/integration/options) page.