Step 1: Open the Editor and Add an HTML Widget

1. Go to your Duda Editor.

2. Navigate to Widgets → HTML (or drag an HTML widget onto your page).
   

Step 2: Add Your Code

Note: This is sample code. Replace your_org_id_here and your_api_url_here with your own Mobilize organization ID and API endpoint.

CSS (Styling your events)

Wrap this in <style> tags:

1. <style>
2. #mobilize-events {
3.   display: grid;
4.   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
5.   gap: 20px;
6.   padding: 10px;
7. }
8. .mobilize-card {
9.   background: #ffffff;
10.   border-radius: 10px;
11.   padding: 20px;
12.   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
13.   display: flex;
14.   flex-direction: column;
15.   justify-content: space-between;
16. }
17. .mobilize-title {
18.   font-size: 1.2rem;
19.   font-weight: bold;
20.   margin-bottom: 10px;
21. }
22. .mobilize-date {
23.   font-size: 0.95rem;
24.   color: #444;
25.   margin-bottom: 8px;
26. }
27. .mobilize-location {
28.   font-size: 0.9rem;
29.   color: #666;
30.   margin-bottom: 12px;
31. }
32. .mobilize-button {
33.   background: #0057b8;
34.   color: white;
35.   padding: 10px 14px;
36.   text-align: center;
37.   border-radius: 6px;
38.   text-decoration: none;
39.   font-weight: bold;
40.   transition: background 0.2s ease;
41. }
42. .mobilize-button:hover {
43.   background: #003f86;
44. }
45. </style>

JavaScript (Fetch and display events)

Wrap this in <script> tags. Replace the placeholders with your actual values:

1. <script>
2. const ORG_ID = your_org_id_here; // Replace with your own Mobilize org ID
3. const API_URL = 'your_api_url_here'; // Replace with your own API URL
4. async function fetchEvents() {
5.   try {
6.     const response = await fetch(API_URL);
7.     const data = await response.json();
8.     renderEvents(data.data);
9.   } catch (error) {
10.     document.getElementById("mobilize-events").innerHTML =
11.       "<p>Unable to load events right now.</p>";
12.   }
13. }
14. function formatDate(dateStr) {
15.   const date = new Date(dateStr * 1000);
16.   return date.toLocaleString("en-US", {
17.     weekday: "short",
18.     month: "short",
19.     day: "numeric",
20.     hour: "numeric",
21.     minute: "2-digit"
22.   });
23. }
24. function renderEvents(events) {
25.   const container = document.getElementById("mobilize-events");
26.   container.innerHTML = "";
27.   events.forEach(event => {
28.     const title = event.title;
29.     const location = event.location?.venue || "Online Event";
30.     const timeslot = event.timeslots?.[0];
31.     const start = timeslot ? formatDate(timeslot.start_date) : "TBA";
32.     const url = event.browser_url;
33.     const card = `
34.       <div class="mobilize-card">
35.         <div>
36.           <div class="mobilize-title">${title}</div>
37.           <div class="mobilize-date">${start}</div>
38.           <div class="mobilize-location">${location}</div>
39.         </div>
40.         <a class="mobilize-button" href="${url}" target="_blank">
41.           Sign Up
42.         </a>
43.       </div>
44.     `;
45.     container.innerHTML += card;
46.   });
47. }
48. fetchEvents();
49. </script>

HTML (Where the events will show up)

Paste this inside the same widget:

1. <div id="mobilize-events"></div>


---

Step 3: Publish Your Page

1. Save the widget.

2. Publish your page.

Your Mobilize events will now:

• Auto‑update with new events

• Display in a responsive grid

• Require no extra maintenance

Reminder: This is sample code. Replace your_org_id_here and your_api_url_here with your own details.

Thank you.