Embed the Wajooba Events List Widget!

Watch the video

Overview

Get ready to supercharge your website! ✨ The Wajooba Events widget is your new best friend for effortlessly showcasing all your amazing upcoming events – from workshops to webinars and live sessions – directly on your website. No tech headaches, just simple copy-paste magic! This powerful little tool helps your audience discover and register for your offerings with ease, boosting your visibility and making your business shine. Let's get your events out there!

Prerequisites

An active Wajooba account with upcoming events.
Your unique Wajooba API key (you'll get this from your Wajooba account settings).
Access to edit the HTML of your website where you want to display your events.

Steps

Imagine having a dynamic, always-updated billboard for your events right on your website! That's exactly what the Wajooba Events widget does. It pulls all your exciting upcoming events from your Wajooba account and displays them as beautiful, informative cards for your website visitors. Each card gives your audience a quick glance at the event image, name, a short description, the date and time, and where it's happening (with a handy maps link!). They'll instantly see if it's free, paid, or links to an external page. With a click, the main image opens a stunning lightbox, and the 'Register' button (or whatever you name it!) takes them straight to your event's sign-up page. It’s all about making discovery and registration super smooth for your potential attendees!

Step 2: Getting Your Essential Wajooba API Key

Before we dive in, you'll need your special Wajooba API key! This key is like a secret pass that connects your website to your amazing events in Wajooba. Don't worry, finding it is easy! You'll typically find this in your Wajooba account settings, often under 'Integrations' or 'API Settings.' Keep it handy, because we'll use it in the next step! (Security Note: Your API key will be visible on your website's public source code. Please confirm if this is acceptable for your use case.)

You're doing great! Now for the exciting part: putting your widget onto your website. It's as simple as copying and pasting two pieces of code! Find the exact spot on your webpage where you want your events to appear. This is usually within the section of your HTML. First, paste this div element. This is where your events will magically load:

<div id='wajooba-events-widget' [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE'></div>

Next, just before the closing </body> tag on your page, paste this script tag. This tells your website to load the Wajooba Events magic!

<script src='[SCRIPT_URL]'></script>

And voilà! Save your changes, refresh your webpage, and get ready to see your events appear! Don't worry if you don't see it immediately; sometimes your website's cache needs a moment to update. You've just taken a huge step in showcasing your offerings!

You've got the basic widget up – awesome! Now, let's make it truly yours. You can customize how your widget looks and behaves by adding special attributes directly to your div element. Think of these as little instructions you give the widget. You'll add them right inside the opening <div ... > tag, just like how you added your [API_KEY_ATTRIBUTE]. Here’s what you can configure to match your brand and preferences:

Your API Key ([API_KEY_ATTRIBUTE]): This is essential for the widget to fetch your events.
Colors ([BACKGROUND_COLOR_ATTRIBUTE], [TEXT_COLOR_ATTRIBUTE], [BUTTON_COLOR_ATTRIBUTE]): Adjust the background, text, and button colors to perfectly blend with your website's design.
Font Family ([FONT_FAMILY_ATTRIBUTE]): Choose a font that matches your brand's typography.
Button Label ([BUTTON_LABEL_ATTRIBUTE]): Change the text on the action button (default is 'Register') to something like 'Learn More' or 'Sign Up!'
Empty State Message ([EMPTY_MESSAGE_ATTRIBUTE]): What should visitors see if you currently have no upcoming events? A friendly message like 'New workshops coming soon!' keeps them engaged.
Layout ([LAYOUT_ATTRIBUTE]): Decide how your events are arranged – we'll cover this in the next step! By adding these, your div might look something like this:

<div id='wajooba-events-widget' [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE' [BACKGROUND_COLOR_ATTRIBUTE]='#FFFFFF' [BUTTON_LABEL_ATTRIBUTE]='Join Now!'></div>

Experiment and have fun making it perfectly reflect your brand!

Step 5: Choosing Your Event Display Layout

How do you want your events to be presented? The Wajooba Events widget offers exciting layout options to beautifully organize your events. You'll set this using the [LAYOUT_ATTRIBUTE] in your widget's div element. Here are your choices:

grid (Default): This is a classic two-column grid layout, perfect for showcasing many events in a neat, organized fashion. It's clean and easy to scan!
horizontal: Prefer a more streamlined look? The horizontal bar layout is fantastic for integrating a few key events smoothly into a section of your page, like a header or footer.
auto: This smart option automatically organizes your events! It can gracefully split your Webinars and in-person Events into separate, clearly labeled sections. This is fantastic if you offer a diverse range of event types and want to make it super easy for your audience to find exactly what they're looking for. To change your layout, simply update your div tag like this:

<div id='wajooba-events-widget' [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE' [LAYOUT_ATTRIBUTE]='auto'></div>

Pick the layout that best serves your audience and your website's design!

Step 6: Displaying Multiple Event Blocks on One Page

Want to feature different sets of events, or have your widget appear in multiple places on the same page? You totally can! The trick is to give each widget a unique ID. All Wajooba Events widgets need an ID that starts with wajooba-events-widget. So, if your first widget is id='wajooba-events-widget', your second one could be id='wajooba-events-widget-2', and your third id='wajooba-events-widget-3', and so on! Just make sure each one has its own div element. Here’s an example of two event blocks on one page:

<!-- First Event Block -->
<div id='wajooba-events-widget-1' [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE'></div>

<!-- ... other content on your page ... -->

<!-- Second Event Block -->
<div id='wajooba-events-widget-2' [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE' [LAYOUT_ATTRIBUTE]='horizontal'></div>

<!-- Don't forget your script tag once at the end of the body! -->
<script src='[SCRIPT_URL]'></script>

This flexibility allows you to highlight different event categories or place event showcases wherever they'll engage your audience most!

Step 7: Customizing Your Widget's Look and Feel

Beyond layouts, you can fine-tune the aesthetics of your Wajooba Events widget to perfectly match your brand's visual identity! You can adjust colors, fonts, and even the text on certain elements. You can customize these by adding specific attributes to your div tag, similar to how you set your API key:

Colors: Set [BACKGROUND_COLOR_ATTRIBUTE], [TEXT_COLOR_ATTRIBUTE], and [BUTTON_COLOR_ATTRIBUTE] to your brand's hex codes (e.g., '#RRGGBB').
Font Family: Use [FONT_FAMILY_ATTRIBUTE] to specify a custom font.
Button Label: Change the text of the action button with [BUTTON_LABEL_ATTRIBUTE].
Empty Message: Craft a welcoming message for [EMPTY_MESSAGE_ATTRIBUTE] when no events are scheduled.
Section Headings & Custom Labels: When using the auto layout, you can even set [SECTION_HEADINGS_ATTRIBUTE] (e.g., to 'true') and provide [WEBINAR_LABEL_ATTRIBUTE] and [EVENT_LABEL_ATTRIBUTE] to customize the titles for your event categories. Here’s an example showing off some customization:

<div id='wajooba-events-widget'
             [API_KEY_ATTRIBUTE]='YOUR_API_KEY_HERE'
             [BACKGROUND_COLOR_ATTRIBUTE]='#F8F8F8'
             [TEXT_COLOR_ATTRIBUTE]='#333333'
             [BUTTON_COLOR_ATTRIBUTE]='#007bff'
             [FONT_FAMILY_ATTRIBUTE]='Arial, sans-serif'
             [BUTTON_LABEL_ATTRIBUTE]='Join Event!'
             [EMPTY_MESSAGE_ATTRIBUTE]='We are planning exciting new events! Stay tuned!'
             [SECTION_HEADINGS_ATTRIBUTE]='true'
             [WEBINAR_LABEL_ATTRIBUTE]='Online Workshops'
             [EVENT_LABEL_ATTRIBUTE]='In-Person Gatherings'>
</div>

With these options, your events widget won't just function beautifully – it will look beautiful too! You've got this!

Curious about how this magic happens? It’s wonderfully simple! When someone visits your webpage, the Wajooba Events widget makes a secure request to https://api.onwajooba.com/plugin/events using your unique API key. Think of it as the widget asking Wajooba, 'Hey, what upcoming events does [Your Business Name] have?' Wajooba then sends back all the event details, and the widget beautifully displays them on your page. When someone clicks an event image, a cool lightbox pops up. And when they hit that action button, they’re whisked away to your event's full page to learn more or register – all in a new tab, so your website stays open! It’s all designed to work seamlessly and securely.

Tips & Best Practices

Always test your widget after making changes to ensure everything looks perfect! ✨
Think about where on your website your audience will most likely look for events. Place your widget there for maximum visibility and engagement!
Customize the 'empty state message' to encourage visitors even when there are no upcoming events, e.g., 'Stay tuned! New events coming soon!'. It keeps your audience hopeful and engaged.
Consider using the 'auto' layout to beautifully categorize your webinars and in-person events, making it super easy for your audience to find exactly what they're looking for.
Remember that keeping your events updated in Wajooba is key to making your widget shine on your website!

Troubleshooting

Don't worry if things don't look perfect right away – we're here to help you troubleshoot common hiccups! Here are some friendly solutions:

Widget Not Showing Up? Double-check that you've copied the full embed code correctly (both the div and the script tag!) and placed it directly into your website's HTML body. Sometimes a missing tag or an incorrect placement can stop the magic from appearing!
Missing API Key Error? This means your widget can't connect to your Wajooba events. Ensure your [API_KEY_ATTRIBUTE] is correctly entered with your actual API key in your widget's div element. You'll find your key in your Wajooba account settings.
No Events Displayed (but you know you have them!)? First, confirm your API key is correct. If it is, check your Wajooba account to make sure your events are published and have future dates. If all looks good, clear your website's cache and refresh the page – sometimes your browser needs a little nudge to show the latest changes!
'Register' Button Not Working? Ensure your events in Wajooba have a valid absolute URL for registration. The widget relies on this link to direct your audience to the right place!
Open Question: If the widget is showing an error or not loading, check your browser's developer console for any specific error messages. These can provide clues to what's going on. If you're stuck, reach out to support with these details!

What's Next

You've successfully integrated your Wajooba Events widget – fantastic work! Now, let's keep that momentum going and grow your business:

Promote Your Events: Share the page with your new widget far and wide! Announce it on social media, feature it in your newsletters, and mention it in your community groups. Let everyone know about your amazing offerings!
Keep Your Events Fresh: Regularly update your Wajooba events with new workshops, webinars, and special offers. A constantly evolving event calendar keeps your audience engaged and excited for what's next. Remember, consistent engagement builds a thriving business!
Explore More Wajooba Features: Dive deeper into Wajooba's capabilities to streamline your event management, boost your registrations, and further scale your knowledge business. You're building something incredible!

Learn More

Wajooba Support Portal (Placeholder)
Wajooba Knowledge Base (Placeholder)
Learn more about Basic Authentication (for developers) (Placeholder)

Boosting Your Event Registrations: Advanced Marketing Strategies
Creating Engaging Event Descriptions That Convert
Setting Up Your First Online Course with Wajooba
Maximizing Your Website's Engagement with Dynamic Content

Embed the Wajooba Events List Widget!

Overview

Prerequisites

Steps

Step 1: Understanding Your Wajooba Events Widget

Step 2: Getting Your Essential Wajooba API Key

Step 3: Quick Start: Adding Your Events Widget to Your Website

Step 4: Tailoring Your Widget with Configuration Options