Schafe vorm Fenster Logo

Schafe vorm Fenster

Portalize Widget Embedding Guide

Welcome to the Portalize widget integration guide. This document provides step-by-step instructions for embedding the Portalize events widget on your website.

Pricing & Activation

The Portalize widget is a paid premium feature that requires manual activation. See the "Getting Started" section below to request activation.

Prerequisites

You need:

  • Organizer ID - Provided after activation
  • Website Access - Ability to add code to your site (your developer or website builder can help)

Getting Started

Step 1: Contact us for activation

  • Email: jan@schafe-vorm-fenster.de
  • Tell us: Your organization name and website
  • We'll set everything up and send you an Organizer ID

Step 2: Add the widget to your website

Copy and paste this code where you want events to appear:

<div id="schafe-vorm-fenster-portalize-widget" data-portalize-widget></div>
<script src="https://events.portalize.app/api/YOUR_ORGANIZER_ID/load.js"></script>

Replace YOUR_ORGANIZER_ID with the ID we sent you. Done! The widget loads automatically.

Full page example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Events</title>
  </head>
  <body>
    <h1>Upcoming Events</h1>
    <div id="schafe-vorm-fenster-portalize-widget" data-portalize-widget></div>
    <script src="https://events.portalize.app/api/YOUR_ORGANIZER_ID/load.js"></script>
  </body>
</html>

What Gets Configured

When you activate the widget, we configure:

Event Filters - Which events show up

  • By category (e.g., "Gemeinschaftsleben", "Bildung & Gesundheit")
  • By location (village, municipality, county, or postal code)
  • By organizer (which organizations' events appear)
  • Initial category that displays when the page loads

Branding (optional)

  • Your logo
  • Your organization's tagline/claim
  • Link from the branding header

Styling (optional)

  • Font sizes (base, headings, details)
  • Colors (we apply initial styling you request)

Customize Branding

Add your logo and organization claim above the events.

To enable:

<div
  id="schafe-vorm-fenster-portalize-widget"
  data-portalize-widget
  data-show-branding="true"
></div>

Logo URL, claim text, and brand link are configured during setup. Contact us to change them later.

Customize Styling

If you know CSS, you can customize colors, fonts, and sizes to match your website.

How it works: Add CSS rules to your page using the [data-portalize-widget] selector. The widget reads these values and applies them.

Base styling (applies to all text):

[data-portalize-widget] {
  color: #1a472a;
  font-family: "Georgia", serif;
  font-size: 16px;
  line-height: 1.5;
}

Customize specific text types:

[data-portalize-widget] {
  /* Headings (event titles) */
  --portalize-title-color: #d500f9;
  --portalize-title-font-weight: 600;
  --portalize-title-font-family: "Georgia", serif;
  --portalize-title-font-size: 1.8em;
  --portalize-title-line-height: 1.6;

  /* Event descriptions */
  --portalize-description-color: #1a472a;
  --portalize-description-font-weight: 400;
  --portalize-description-font-family: "Georgia", serif;
  --portalize-description-font-size: 1em;
  --portalize-description-line-height: 1.6;

  /* Details (date, location, organizer) */
  --portalize-metadata-color: #666;
  --portalize-metadata-font-weight: 400;
  --portalize-metadata-font-family: "Georgia", serif;
  --portalize-metadata-font-size: 0.9em;
  --portalize-metadata-line-height: 1.5;

  /* Links and buttons */
  --portalize-highlight-color: #ff6f00;
  --portalize-highlight-font-weight: 600;
  --portalize-highlight-font-family: "Georgia", serif;
  --portalize-highlight-font-size: 0.9em;
  --portalize-highlight-line-height: 1.5;

  /* Category filter buttons */
  --portalize-button-bg-color: #f3f4f6;
  --portalize-button-bg-color-selected: #d1d5db;
  --portalize-button-text-color: #000000;
  --portalize-button-text-color-selected: #000000;
  --portalize-button-font-weight: normal;
  --portalize-button-border-radius: 0.25rem;
  --portalize-button-border-color: transparent;
  --portalize-button-border-width: 1px;
  --portalize-button-icon-size: 1em;

  /* Event dividers */
  --portalize-divider-color: #d1d5db;
  --portalize-divider-width: 1px;
  --portalize-divider-style: solid;

  /* Event images */
  --portalize-image-bg-color: #d1d5db;
  --portalize-image-border-radius: 0.5rem;
  --portalize-image-shadow: none;

  /* Branding header */
  --portalize-logo-height: 2.5rem;
  --portalize-branding-gap: 0.5rem;

  /* Category/tag badges */
  --portalize-badge-bg-color: #e5e7eb;
  --portalize-badge-border-radius: 0.25rem;
}

Troubleshooting

Widget not appearing?

  • Check that your Organizer ID is correct (from our email)
  • Check the browser console for errors (press F12, look at Console tab)
  • Make sure the script URL matches the ID we sent you
  • In DevTools, check the Network tab - the script should load (Status 200)

Widget appears but no events?

  • Make sure you have published events in your calendar
  • In DevTools Network tab, verify the events API call succeeded (Status 200)

Styling not working?

  • Check that CSS variable names are exactly correct (e.g., --portalize-title-color)
  • Make sure CSS rules are on [data-portalize-widget]
  • CSS variables work in all modern browsers
  • Use DevTools Inspector to verify the CSS is being applied

Support

Have questions or need help?

Last updated: 20.01.2026