Articles on: Website

How to create/edit a widget to display events, blogs and more

This article guides you through the creation and management of widgets in ChurchDesk. Learn how to create customizable Event and Blog Feeds, configure their design, and integrate them both on your ChurchDesk website and on external websites.



In this article you will find
  • General Widget Settings
  • How to create a new Widget
  • How to edit a Widget
  • How to use your Widgets on your ChurchDesk website
  • How to use your Widgets on your own website, which was not created in ChurchDesk


General Widget Settings


You can access the widgets and their settings via the Website module.



Design Options
On the left under Design Options, you can globally set the Primary Color (for titles and elements) and the Card Background Color (in the overview on the website) for all widgets. You can set the colors via color palette, RGB & Hex code. Furthermore, it is now possible to display suggested content on blog/event pages for all widgets.



Widget Design (only for Studio
In the Widget Design section, provided you have subscribed to ChurchDesk Studio, you can change the appearance of your standard widget.

  • Corner Style: Here you can choose between square and rounded corners.
  • Show shadow: Here you can select or deselect shadows.
  • Widget font: Here you can freely choose between the different fonts that can be used on the website.


Additionally, with Studio, you also have the option to customize the design options for each widget individually (more on this below).



Creating a New Widget


Note: Only blog posts and events with the visibility setting "Public" will be published on the website. Only authorized roles can set this.


  1. Go to Website > Widgets
  2. Click on Create Widget
  3. Select the Widget type: Event Widget or Blog Widget
  4. Edit the new widget and make the respective settings


Event Widget


Widget Name: Give the new widget a name; this is only visible internally.
Include events from: If you belong to a portal community, you can choose between your own or the portal calendar.
Locations: Here you can filter by resources. If the field remains empty, all resources are automatically included.
Event Categories: Here you can filter by categories. If the field remains empty, all categories are automatically included.
Time range: Choose whether all events should be displayed, only a certain period, or a certain number of days in advance.
Number of events per page: Here you specify how many events should be displayed at once.
Show Location Address: You can choose whether the address for the event should be displayed in the widget overview or only when the individual appointment is selected via the widget.
Show Event Image: If you click here, you can enable/disable displaying an image for the event in the widget overview. Below that, you can set a default image. This will be automatically inserted into the widget if you have not stored your own image in the respective calendar event.
Allow visitors to filter: Click here if you want to allow external visitors to filter events. If the filter is activated, you also have the option to choose whether visitors can also filter by districts or not.


Studio:Customise color scheme: Studio users can choose a different primary and/or background color for the new widget. If the checkbox is activated, the corresponding selection option appears.


Be sure to confirm with "OK" at the end, so that all your settings are saved.



Blog Widget


Widget Name: Give the new widget a name; this is only visible internally.
Include Blog from: If you belong to a portal community, you can choose between your own or the portal blog posts.
Blog Categories: Here you can filter by categories. If the field remains empty, all categories are automatically included.
Number of Blogs per Page: Here you specify how many blogs should be displayed on the page in total.
Number of Blogs per Row: Here you can specify how many blogs should be displayed per row (1, 2 or 3).
Default Image: If you click here, you can insert an image into the blog. If you activate this button and do not insert an image, a default image will be automatically inserted.
Allow visitors to filter: Click here if you want to allow external visitors to filter events.


Studio: *Customise color scheme:** Studio users can choose a different primary and/or background color for the new widget. If the checkbox is activated, the corresponding selection option appears.



Note: Users of the Donations module can also create a Donations Widget. We describe how to do this here.



Editing Widgets


When you click on "Actions" on the right side next to the respective widget, you will get the following options:

  • Edit: Here you can change the settings for the individual widget mentioned earlier in the article.
  • Preview: Here you can see how the widget looks on the website.
  • Show Code: Here you can copy the HTML code of the widget.
  • Copy: Here you can create a duplicate of the existing widget.
  • Delete: Here you can irrevocably delete the widget. A pop-up window will appear asking you to confirm this step.


ChurchDesk has three standard widgets that you cannot edit or delete: "All Events", "All Blogs" and "All Donation Projects".


In addition, there is also the "Slideshow" widget, which cannot be copied or deleted. More information about the Slideshow can be found here.


Embedding Widgets on Your ChurchDesk Website


Go to the page where you want to insert the widget, e.g., an overview of upcoming events, the latest blog posts, etc.


In the row where you want to insert the widget, create a new Dynamic Content Module and select the type of widget you want to insert in the settings by choosing a category. Then you can select the desired widget from the element list. Once the widget is inserted, you can see the final result under Preview.



Embedding Widgets on Your External Website


When you click on "Actions" on the right side next to the respective widget, you can click on "Show Code". Embed the widget on your website by copying the code and pasting it into your website's HTML code.





Keywords: Widgets, Event-Feed, Blog-Feed, Website, Design, Settings, Content, Embedding, Calendar, Blog posts, Share Calendar, Share Events, Blogs

Updated on: 20/06/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!