©2018 Shelby Systems, Inc. Other brand and product names are trademarks or registered trademarks of the respective holders.

ShelbyNext | Websites: Advanced Process

(Course #N257)

Presented by: Maggie Emerson Web/Mobile Account Manager

2

Objective

Take your church website to the next level using advanced features of ShelbyNext | Websites.

What You Cover in This Session

You cover how to…

• Add custom HTML • Manage events • Email newsletters • Publish podcasts • Integrate with your ChMS

3

Add Custom HTML

• Source Code "<>": Code editor for access to the raw HTML code of the page.

4

5

Manage Events

Manage Events • Category: Manage and sort events by Category and Sub-Category

List View • RSVP: If enabled, shows the number of people registered for this event.

Add a New Event • Name: This is the name of the event. Multiple events with the same name are allowed

but not with the same start date.

• Add Summary: If you would like to add a brief summary, click the 'add summary' link.

• Description: A longer description of the event. NOTE: See WYSIWYG Editor for detailed

instruction on using the WYSIWYG.

• Start Date/Time: When the event begins. For recurring events use the date of the first

or next occurrence. If 'all day' is checked, start time is disabled.

• End Date/Time: Then end of the event. If 'all day' is checked, end time is disabled. For

recurring events, the end date is disabled.

• Repeats: Specify if the event repeats daily, weekly, once a month, or twice a month. If

'Repeats indefinitely' is checked, the end date is disabled. You can also now specify the

event to occur every [x] days | weeks | months.

• Weekly: If the event recurs weekly, you can specify on which days of the week the event

occurs.

• Every Other Week?: If the event recurs weekly, you can set it to only recur every other

week.

• Week and Day: If the event recurs monthly or bi-monthly, you need to specify the

weeks and days on which it occurs.

• Website: A link to an external site for more information about this event.

• Location: Choose an existing location or add a new one. If a new location is added, you

can edit the address and name from the location manager.

• Coordinator: Choose the event coordinator or add a new one. New coordinators can be

edited with the member’s module.

6

• Categories: Choose a category or create a new one. New categories can be edited from

the Category manager.

• Cost: Specify the price of the event. If there are multiple price points, click the link that

says 'Multiple Prices'.

• Multiple Prices: Set a label for each price point (i.e. Kids under 10). "Limit" sets the

number of people that can register for the event at that price point.

• Att. Limit: Attendance limit caps the number of people that can register for this event.

• Allow Registration: Check this if you want users to register for this event online. 'Allow

Guests' lets users register multiple people at once. 'Allow Notes' enables the users to

leave a brief message when registering. 'Email Coordinator Registration Notifications'

sends an email to the event coordinator each time someone successfully registers. If the

event coordinator is not specified, the site's default email address is used.

• Image: Specify an image to associate with this event.

Calendar Allows you to easily add and delete events as well as make exceptions to recurring events.

Clicking the pencil icon on recurring events provides the following options:

• Edit the master event: Edits the original event that started the recurrence

• Edit just this occurrence: Edits this specific occurrence of your recurring event

• Delete just this occurrence: Allows you to delete this specific occurrence of your

recurring event

• Delete entire event: Deletes all occurrences of this event

RSVP

List View

• Filters: You can filter this view by the year or the month.

• Securely export this report: Produces a CSV report of the current view. If you copy this

text to a blank text document and then save it with the extension .CSV, you can import

it into excel or other spreadsheet programs.

7

Review Registration

Clicking the edit link lets you see the users name, email address, physical address and phone.

You can also review or edit the number of guests for that user or add/edit a note for that user.

Publish

More Options: Selecting this option allows you to publish the event to specific groups. This also

gives you the option on whether or not you want to show the event in your calendar listing.

Keep as Draft: Event is not published and kept as a draft.

Publish as Featured: If featured is supported on your website, this makes the event featured.

Publish: Publishes the current event. Event now shows up in your event listing on your website.

Edit an Event

Clicking the name of any event on the event list screen allows you to edit your event.

Copy an Event

You can create a copy of your event from the edit screen by clicking the "Copy Event" button in

the sidebar. You can also copy from a previous revision by clicking on the date of the revision in

the sidebar, and then clicking the "Copy Revision" button.

Using Inline Parameters with Monklets

If you want to display specific information with monklets, such as all Events matching a

Category or People in a Group, you can use "Inline Parameters." Common parameters are

"find_category" or "find_group".

Example:

In this example, there is an Event Sidebar Monklet that is currently displaying the next

upcoming event:

8

If you want to display all Events categorized by “Family” in the sidebar, you would add the

following syntax:

If you have a category with two words, you need to use the slug of that category name. The slug

is the name without any spaces or special characters, so the slug for "Children's Ministry" would

be "childrens-ministry". If you're ever not sure what the slug would be, you can use this

handy slug creator.

9

Now that the "Family" category parameter is added, the next upcoming event that is

categorized by "Family" is displaying in the sidebar:

10

If you need to use two inline parameters, simply use a comma to separate them. For example,

11

Email Newsletters

Quick start 1. Create site Members and specify their email addresses (in People > Members).

2. Assign these members to a Group (in People > Groups).

3. Create your newsletter (in Connect > Newsletters).

4. Send a test newsletter to yourself or a colleague to test your newsletter.

5. Publish the newsletter, selecting the appropriate Group. The newsletter is sent to all

members of this group.

Creating the newsletter 1. Visit Connect > Newsletters.

2. Click Add a New Newsletter.

3. Complete the necessary fields:

1. Newsletter Name: This is the backend title of the newsletter. It is not seen by

the public.

2. Subject: This is what the public sees as the subject of the email.

3. Send replies to: When recipients reply to the newsletter email, their reply is sent

to these email addresses.

4. Content: Refers to Using the WYSIWYG editor for additional help adding

content.

5. Tip: You can use the merge tag, EMAIL_FIRSTNAME, to place dynamically the

recipient's first name in the body of the email.

6. Template: If you have multiple newsletter templates from which to choose,

select it here.

7. Click Save.

Paragraphs and Headings Paragraphs and headings may not display consistently across all email applications as they

might on the web. For example, both Google's Gmail and Android email applications ignore

your site's default font styles (set in the main CSS stylesheet of your website), making the text

display in black.

12

Images

Image sizes

If an image you wish to use was not specifically sized for your newsletter template as specified

by your designer, you may simply adjust the image size via the CMS. Select the image, click on

the “Insert/edit image” button, and specify the width and height of the image to avoid image

size problems in your email. If an image is too wide for a particular column in your newsletter,

the column likely expands with it.

Text wrapping images

When using the align tools in the content editor, the image moves to either side and allows text

wrapping for the following paragraphs. Some email clients unfortunately do not support this

feature as web pages would. Therefore, to position an image beside a block of text in

newsletters, it is best to create a simple table of two columns and insert the image in one side

and the text in the other, like this:

13

Creating Responsive Columns

You can create a multi-column layout in your pages and content sections by adding some

custom HTML into the page. This method requires a few additional steps than using a Table

element; however, it is preferred for creating responsive (mobile-friendly) content.

Luckily, our Grid Generator tool provides the HTML you need for your page.

1. Open /grid-generator/

A Grid Generator may be available already on your site at "mysite.com/grid-generator/". If not,

you can find the tool here as well:

http://tools.ekklesia360.com/grid-generator/

2. Add rows

Select the number of rows you need for your layout.

14

3. Choose layouts

For each row, select how many columns you need. For example, "half-half" gives you two

columns, each one using half the page.

15

4. Copy source code

When done, copy the HTML code snippet generated, or click "Preview" to see how the layout is

set up.

5. Open page source code

In your page, open the Source Code "<>" editor.

16

6. Paste source code

Paste the snippet there (Ctrl / Cmd + V), and click OK.

17

7. Add your content

The grid is in place! Some example text and an image are placed in each cell. Place your cursor

there and add your own content to complete the layout. The FullScreen button on the right side

of the toolbar is helpful for editing grids.

Scheduled mailings 1. To choose a time when the newsletter is sent, click Publish when editing the newsletter.

2. Select "Send later".

3. Specify the date and time you would like the newsletters to be mailed.

4. Select your recipients by selecting the appropriate Groups, or by selecting All Members.

When a newsletter is scheduled, a queue is created including a copy of the newsletter and all

email addresses from the Group as are present at that time. Any changes to the newsletter,

including changes to the content or subscription statuses of members, are included in

the next scheduled mailing, and not the currently scheduled mailing.

18

Subscribing and unsubscribing recipients Site Administrators can choose which members are subscribed to a newsletter via Groups. First,

the user must be added to a Group.

1. Visit People > Groups.

2. Click on the name of the Group you wish to use for the newsletter (or create a new

Group).

3. Click "Edit Group" at the top left.

4. Use the "Add Members" field to add new members to the Group.

5. The user is now included in the Group for the next newsletter mailing.

By default, new members are automatically "subscribed" and receive mailings sent to the

Group. However, they can choose to unsubscribe via links automatically placed at the bottom

of each newsletter email. If the member unsubscribes, the status "unsubscribed" is attached to

their name in the Group list; they are not removed from the Group. This gives you the ability to

keep members organized in Groups whether or not they choose to unsubscribe.

If a member is unsubscribed, a Site Administrator may re-subscribe the user to the Group like

so:

1. Visit People > Groups.

2. Click the newsletter's Group in which the member was subscribed.

3. Find the member(s) in question and check the selection box next to their name.

4. Click Edit Selected Members at the top right of the page.

5. In the Subscription dropdown, re-subscribe the user(s).

Schedule a Newsletter Note: To avoid being flagged as spam, only a limited number of emails are sent per hour.

• Send Now: Begins sending the newsletter immediately.

• Scheduled Send: Begins sending later. Listed time is adjusted to the time zone of the

computer being used.

• Recipients: Send the newsletter to all members or just members of certain groups.

Members who have unsubscribed are not sent emails. If unsubscribed, a note is added

to the user’s record on the group's member list page.

19

Newsletter Statistics Delivered: The number of emails that were successfully added to the recipient's inbox.

Opened: The number of times the email was opened by any recipient. One recipient may open

the email multiple times. This is tracked with a hidden image embedded into the newsletter;

when the image is loaded, one Open is logged. Users who do not allow image loading in their

emails unfortunately cannot be tracked.

Clicks: The number of times any user clicks a link inside the email. All links inside your

newsletter content are tracked.

Bounced: The number of emails that were rejected by the receiving mail server. Some common

reasons for this include a full inbox, a misspelled email address, or a temporary issue on the

recipient server.

If a newsletter is sent multiple times, the statistics of all sends are totaled together.

Other tips

Do

• Test your newsletter in multiple email applications.

• Which are most popular? See below for email client market share percentages.

• Let users know why they are receiving the email.

• A subscriber may have signed up by accident, or forgotten why they signed up. Explain in

the newsletter how one would have signed up for the newsletter, and that an

unsubscribe link is available when necessary.

• Use "absolute paths" for images (including your domain "http://www.site.com/" in the

source URL).

• The CMS already takes care of this for you for images inserted via the WYSIWYG content

editor. Make note of this tip when pasting in your code from another application.

• Offer links to let users 1) unsubscribe and 2) view the message as a web page.

• The CMS provides these links automatically. If you want to move them or change their

appearance, contact your web designer.

20

Avoid

• Creating your newsletter content as one large image.

• Not only may spam filters catch the message, but also some email apps by default do

not display images.

• Using embed codes (videos, forms, etc.) in your newsletter.

• Embed codes containing scripts are not allowed in newsletters. It is best to provide a link

for the user to view this kind of content on a webpage instead.

• Using overly complicated CSS styling.

• Using CSS for layout (positioning your elements) produces inconsistent results within

email apps. Tables are the current standard for email layout.

21

Publish Podcasts

For official Apple podcasting documentation, please visit:

https://itunespartner.apple.com/podcasts/

For information on podcasting with Google Play, see:

https://play.google.com/music/podcasts/

First: Creating a new feed 1. Go to Connect > Feeds, and click Add a New Feed.

2. Select a feed Type. All are RSS feeds, except the Events type, which is an ICS feed for

calendars.

3. Select any "Use" options you'd like such as Use Category or Use Group. With these

options, you limit your feed to include only the Categories or Groups that you set here.

Otherwise, all items are included in the feed.

4. Under Podcast Category, choose a category name that best describes your podcast.

5. Give a Title to your feed.

6. Select a Logo for your feed. This must be a high quality, high-resolution image

(specifications below).

7. When you are done, click "Add Feed". In several minutes the XML file feed is available at

the URL shown. With this link, users can manually subscribe to your content, or you can

provide this URL to iTunes or any other podcast service if creating a podcast.

Adding your existing podcast to iTunes Ekklesia 360 updates an RSS feed of your sermons, articles, and blog posts whenever an item is

edited or published. The URL to this feed file (ending in ".xml") must be submitted to iTunes for

your podcast to be hosted by Apple.

1. In the CMS, navigate to Connect > Feeds.

2. Select the existing content feed you wish to use for the podcast or create a new feed.

3. Set up your feed for this podcast with the options therein.

4. When finished, Copy the URL "Location" of the feed.

(Example: http://www.yoursite.com/mediafiles/sermons.xml)

5. Visit https://podcastsconnect.apple.com/ to submit.

22

Adding podcast artwork

Artwork for the iTunes podcast directory

iTunes requires a high-quality square image to serve as the podcast artwork. Full specifications

are...

• Dimensions: At least 1400 x 1400 but no more than 3000 x 3000 pixels.

• Format: JPG or PNG (The file must end in ".jpeg", ".jpg" or ".png").

• Color: RGB color space. CMYK (for print) is not supported.

To add the logo:

1. Go to Connect > Feeds > Feed Title.

2. Select an image file in the dropdown option for Logo.

Updating the podcast artwork for an existing podcast

To update an existing podcast image file, it is recommended that you give the updated image a

new filename to help iTunes know that the image has changed. If the new image uses an

identical name, iTunes may never know that the image needs updating.

Artwork for individual podcast files The podcast artwork that appears on the user's actual device (the iPhone, iPad, or in the iTunes

desktop interface) when playing the media file is not the same as your podcast directory

image. The artwork for individual podcast files needs to be set by embedding images into the

individual audio files themselves.

You can do this in iTunes by:

1. Selecting your podcast audio file in the iTunes library.

2. Right clicking on the item and selecting "Get Info" from the menu.

3. In the Artwork tab, add an image and OK.

4. The image is now embedded in the media file and ready to upload. You can click on the

listing in iTunes and drag it onto your desktop to retrieve the file out of iTunes.

A tool called ID3 Editor can also help you add image files to media items.

23

How podcast items are arranged in the feed Podcasts are arranged in the feed by the publish date, which is set by the Date field in the

Articles or Sermons module for each individual item. In the iTunes podcast directory, the most

recent items are listed first (this may be different on iOS devices).

Changing the item's date in the Date field in the CMS changes the item's publish date in the

feed.

Publishing multiple items for the same day

In the case when multiple items are published in the same day, the items are arranged

by modification time. This allows you to customize the arrangement of same-day items in the

feed. To change the modification time, leave the Date unchanged and publish the item again by

using Publish or Published as Featured. Consequently, when needing to arrange a group of

items published for the same day, you can set the modification time in sequence from oldest to

newest using the same method. Publishing same-day items simultaneously with a batch update

causes their publish times to be identical, which may result in an unpredictable arrangement

for same-day items.

How users can subscribe to your podcast Depending on your site design, a sermons podcast link is usually available in your sermons list

template or homepage, or both. With that, users can subscribe in several ways.

Subscribing via plain XML

The XML file URL can be used in iTunes to manually subscribe to the podcast, like so:

1. Click the podcast link on your website and copy the URL.

2. Open iTunes and navigate to Advanced > Subscribe to Podcast.

3. Paste in the URL. The podcast is now added to the Podcasts list in iTunes.

Subscribing via iTunes direct link

By using a special link provided by Apple, the iTunes application opens on the user's computer

and automatically directs them to your podcast listing in the Podcast Directory.

24

If your podcast is available on iTunes and you want to create this direct link, visit iTunes Link

Maker, find your podcast and copy the direct link. If you need help implementing this link on

your site, contact Support.

Subscribing via RSS

The podcast XML feed is also compatible with any RSS reader. Users can download each new

post automatically from the RSS feed if using an RSS reader like Apple Mail or Google Reader.

Podcasting Best Practices It is suggested that you create a Podcast page on your site that explains how to subscribe to

your podcast using the iTunes application.

25

Integrate with your ChMS

Integrating ShelbyNext | Membership Calendar Events with Your CMS The Group Finder is a great feature that allows your members to find groups in their area, according to their interests. You can also configure it so that individuals can add themselves to groups or ask to be added to the group.

To view the integration settings and get the connection set, just go to your Admin tab and then the Integrations settings area.

Please note: There are two constraints.

1. Events are only synced one year into the future in order to keep synchronizing quick and stable for everyone.

2. Multi-day, recurring events are not synced from ShelbyNext | Membership, as ShelbyNext | Websites does not support such events.

It is highly recommended that you create a separate ShelbyNext | Membership user solely for the ShelbyNext | Websites integration, instead of using your personal login.

Before implementing the integration, it is also suggested that you create a view in your ShelbyNext | Membership Calendar just for the website. The default is to bring in all events. Once you connect, you see a drop-down of all your calendar views, and you can choose the "Website" view that you created. Once selected, only events that appear in this calendar view are synced. Otherwise, all events are synced.

How to complete the integration:

1. Enter your ChMS Account Information and Connect your account:

26

2. After Step 1 is completed, you can choose to include categories in the event sync as well

as select the Calendar View with which you want to sync from the drop down:

27

*NOTE: While Ekklesia 360 does support importing recurring events, it does not support multi-day recurring events.

Including Categories In Event Sync: If this box is checked, the "Properties" assigned to each event in the ChMS is synced with "Categories" within Ekklesia 360. If there is not a "Category with the same name as a "Property", then a new "Category" is created within Ekklesia 360.

*NOTE: Ekklesia 360 does not support duplicate Category names, but the ChMS does. Therefore,

if you have multiple Properties with the same name, they are not synced with Ekklesia 360

Categories.

Calendar View:

If you do not have multiple calendar views within your ChMS account, it just synchronizes with

all your calendar events.

3. Verify the sync happened correctly

Once this is finished, you see the Events in the Events Module of Ekklesia 360 (EVENTS >

Events), and they also display on the Events Page of your Website. Ekklesia 360 synchronizes

changes from the ChMS every 15 minutes so if you are making changes in your ChMS, it takes a

little while before you see those reflected in your Ekklesia 360 account or on your Website.

28

4. Step 4: Updating Events - In the ChMs or in Ekklesia 360?

Most changes to the events that have been synced need to be made in the ChMS. For synced

events, Ekklesia 360 does not allow you to edit the data that has been brought over.

However, some fields within Ekklesia 360 are not synced with the ChMS event, because there is

not an equivalent field in the ChMS.

29

See the screenshot below for what is Editable within Ekklesia 360's Events Module and what is

editable within e360o ChMS:

30

Group Finder The Group Finder is a great feature that allows your members to find groups in their area according to their interests. You can also configure it so that individuals can add themselves to groups or ask to be added to the group.

Configuring the Group Finder

1. Click on Settings. 2. Click on Groups. 3. Click on Group Finder. 4. Be sure to Enable and then set your other properties as desired.

31

Embedding the Group Finder into Your Website

1. Click on Settings. 2. Click on Groups. 3. Click on Group Finder. 4. Copy the "Website Embed Code" from the bottom of the page and paste it into your website.

NOTE: This embed code cannot be pasted into the body of your website like normal text. You need to use the "View Source" option in your website's WYSIWYG editor and then paste this embed code.

Calendar allows you to maintain all events that are happening with your organization. You

can track them by date, location, group, and many other options. This page also allows other

users to request locations to be held for various events, and you can approve or decline them

by viewing the Pending button.

Embed a calendar in your website

Using ShelbyNext | Membership, you can embed one or more calendars into your public website. Not only is this a great way to publicize your events, but it also reduces or eliminates the need to manage multiple calendars in your church. Additionally, using this method allows you to put calendar events in a public setting without requiring the viewer to have a username/password. Only calendar views can be embedded into a website. There are two steps:

1. Get the HTML code to embed your chosen calendar view (instructions below). 2. Paste this code into your website (works with any website. If your site is provided

by ShelbyNext | Membership, feel free to contact our support team for help. Otherwise, your website administrator can probably do this step for you).

How to get the HTML embed code

1. Within ShelbyNext | Membership be sure you are viewing the calendar (click Calendar in the far upper right corner of the screen).

2. In the lower left corner, click on Views and select the one you want to place on your website.

32

3. Click the actions/gears button next to the view, which launches the Edit View window. See example below. In this window you see a field for "Website Embed Code". Copy EVERYTHING inside this field and then paste it into your Website.

Maggie Emerson Web/Mobile Account

Manager maggie.emerson@shelbyinc.com

Maggie began her full-time career at Shelby in the Marketing Department. After serving as Marketing Manager she moved to the Account Management Team and is now the Mobile/Websites Account Manager.