Welcome! This guide introduces the CitySpark WordPress plugin, a simple tool designed to help you easily embed portals, widgets, and event calendars onto any WordPress website. Whether you're working with a clean slate or integrating into an existing site, this article walks you through installation, setup, and configuration.
🧩 Installing the CitySpark Plugin
Log into your WordPress Admin Dashboard
Go to:
Plugins > Add NewSearch for:
CitySparkFind: CitySpark Events and Embeds
Click:
Install NowThen:
Activate
Once activated, the plugin will add new blocks to your WordPress editor and provide access to plugin-specific settings.
📅 Embedding the CitySpark Calendar
To add the event calendar to a page:
Create or edit a page (e.g.,
/calendar)In the WordPress block editor:
Click the + icon to add a block
Search for CitySpark
Select the Portal block
You’ll see a placeholder.
Paste your Script ID (usually available on your admin page)
This will load the live preview of the portal/calendar
💡 Note: The editor preview may look squished. Don’t worry—it will render full-width on the published page.
4. Publish the page
Visit your page to confirm the calendar is visible and functional
⚙️ Configuring for HTML5 Routing (Optional but Recommended)
By default, the plugin supports the hashbang URL format (#!). If your site uses HTML5 routing, there’s an additional step to ensure deep links work correctly.
Why this matters:
If a user clicks a link to a specific event (a deep link), the page may not load correctly when refreshed or shared—unless routing is set up properly.
Fixing Deep Linking:
In the WordPress admin, go to:
Settings > CitySpark Event CalendarUnder Placement Rules, do the following:
Add your placement URL (e.g.,
/calendar)Set the Type to:
PortalEnter your Script ID
Click:
Add Rule
This ensures that if someone visits a direct event link or refreshes the page, the calendar and event details will load correctly.
✅ Summary
To embed a CitySpark calendar on your WordPress site:
Install and activate the plugin
Add the portal block to any page
Paste your Script ID
Configure settings for deep linking (optional for HTML5 routing)
And that’s it! You're live 🎉
For any additional help or inquiries, please contact our customer support team at support@cityspark.com.