Best Practices

This will be an ongoing log of "Best Practices," to include processes for website building, checking, maintenance, etc. which can then be shared with all users.

Digital Team FAQ and Best Practices

  • At least 2 entries
  • Title Case at Top of Accordion
  • Title Case for Each Accordion*

*exception: If the Accordion is a Frequently Asked Questions and the entries are each in the form of full sentences, sentence style should be used.

To add or delete a new row for in accordion or tabs

  • Check out the page
  • Click Edit
  • Click on green button to edit the section the snippet is in
  • To add additional rows, put your mouse in one of the content areas and right click the mouse. From the popup menu, choose “Row.” Then choose “Insert Row Before” and it will put a new blank row above the area you are in (or you can Insert Row After.
  • To delete some of the old ones when it’s time, Put your mouse in the content box of the one you want to delete. Right click the mouse and choose “Row,” then choose “Delete Row.”

All Pages

News and Event Snippet on every page as last element, unless good reason not to.

Why: to build community

How: If that particular unit doesn't have their own news/events, etc., step up to next largest unit that they are under:
Department > School/College > University

Program Pages

Have the appropriate Join Us asset at top of page, per University President. All Campuses have a Join Us asset with admissions contact information.

  • University is capitalized when referring to Webster University
  • Academic Dr. can be used in special circumstances (i.e., the Chancellor)

  1. Compare current staging version with live version by going to versions and clicking on “Compare to Live.”
  2. Click on Properties, and make sure Title, Description, Keywords and Tags are completed for SOE.
  3. Scroll down entire page for obvious discrepancies in style, photos, AP Style, etc. If major changes are needed and time does not allow, add page to a running list in Asana of pages that need to be redone or embellished.
  4. Run spell check; correct any misspellings; add to dictionary any words or abbreviations that are known to be correct.
  5. Run links check; correct any broken links.
  6. Run accessibility check and determine if any flagged problems can be improved.
  7. Check for dependency tags — especially with photos and assets.
  8. Remove instances of & except Business & Technology, Diversity, Equity & Inclusion and U.S. News & World Report.
  9. Scan for obvious AP Style violations.

All ChatBots must be attached to a Facebook page.

Much of the work to get the ChatBot up and running is on the Facebook side.

  1. Identify:
    1. which Facebook page will be linked to the chatbot and make a note of its Facebook ID
    2. which page on the website the chatbot will be deployed on and make a note of its URL
  2. An administrator of the Facebook page will need to do several steps
    1. go to Settings (Page Settings) > Advanced Messaging, and in the Whitelisted Domains section, list the above URL and the main webster page, both with and without www in the addresses.
      https://webster.edu https://www.webster.edu https://URL https://www.URL
    2. go to General Settings > Response Method, and make sure Instant Reply is turned OFF and Frequently Asked Questions is turned ON
    3. under Frequently Asked Questions, select Edit Message and insert automated Q&A
  3. The Digital Team can then go "Check Out" the URL the chatbot is to be deployed on in Omni CMS
    1. Select <Source> and between <footcode></footcode> copy the code below, changing out the Facebook ID after page_ID with the numerical Facebook ID provided above.
    2. This code will call on a resource file (/_resources/js/chatbot.js) that doesn't need to be altered.
    3. Publish page, and chatbot should be deployed.

Source Code for Chatbot, to go between <footcode></footcode>:

<footcode>
<script src='/_resources/js/chatbot.js'></script>
<div class="fb-customerchat" page_id="Facebook ID" ref="5e9621b587c80b298b349dfc" style="position:relative; bottom"></div>
<style>

/* The following is for the chat bubble */
.fb_dialog_content>iframe {
left: 18pt;
}

/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
left: 9pt;
}

iframe.fb_customer_chat_bounce_out_v2 {
left: 9pt;
}

/* The following are for the bounce in/out animations */
@keyframes fb_bounce_in_v2 {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}

50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left;
}

100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}
}

@keyframes fb_bounce_out_v2 {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left;
}

100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left;
}
}
</style>
</footcode>

When closing out a project through email, direct the client to the project request form for future requests:

Why: to encourage the use of the request form for consistency

Example: At this point, this work is complete. If you have any additional work, please let the Digital Team know by using the Creative Services request form (https://websteru.sharepoint.com/sites/GlobalMarketingAndCommunications/SitePages/Project-Work-Request.aspx), making sure to note what the web page URL is in the request. This keeps the whole team informed about project requests and will allow the first available person to work on your request.

The Webster Events calendar feeds directly to the University website on multiple pages through the News and Events content block that is located on the bottom of web pages.

Just as the news articles from the News site can be filtered to specific topics on each page, the Events calendar is designed to do the same. Each school or department should have a representative who can add events to the calendar. Anyone can create an account and submit an event.

To add events to the Events calendar that appears on the bottom of all web pages:

  1. Go to https://events.webster.edu/
  2. Click the LOGIN button at the top center/right of the page
  3. If you do not already have a login, Sign Up
    1. NOTE: This is not your Webster username and password, and at least the password should be distinct for security purposes.
    2. It asks for your name, community (time zone), email address, and password
  4. After logging in, scroll down to the bottom of the page, and on the right, below the calendar, there will be a Submit an Event button
  5. Fill out form for event, as completely as possible.
    1. Make sure to mark Filters — this is what the website uses to target events to pages.
    2. Filter: Event Type — select the options that most closely align with your event; please note that multiple options can be selected.
    3. Filter: Category — select the categories that most closely align with your event; please note that multiple options can be selected. If your event is online, please be sure to include the Online category.
    4. Filter: Department — there are a few departments listed here; if your event falls under one of the ones listed, please select it. Otherwise, please make sure your department or school/college is selected under Category.
    5. Filter: Group — there are a few groups listed here; if your event falls under one of the ones listed, please select it.
  6. Add Event
  7. Repeat for each event.
  8. When you are done, if you do not have manager/administrator access, please send an email to Patrick Giblin, Director of Public Relations (patrickgiblin61@webster.edu) to expedite the approval process. If there are additional tags that you were unable to add to your event through the Filters, please note that as well.
  9. As a reminder:
    1. Event Types are used to filter events to specific web pages on our web site.
    2. Categories allow people to filter events on the calendar itself.
    3. Because of this, it’s best to select your tag for both Event Types and Categories, so that it shows up on related tagged web pages and people using the calendar directly can filter down to only your tagged events.

If you have a large number of events to add at once, you can contact the administrator for additional instructions at https://events.webster.edu/help/contact.

If there are any questions or difficulties adding an event, submit a project work request at Project Work Request (sharepoint.com) for assistance.

Facebook IDs from Tara Graves

Department / Campus Facebook ID

Webster University (Main Page) 32419581551

Admissions
  • Admissions (Undergrad) 1103920999701760
  • Graduate Admissions 115153146978936
  • International Admissions 828283617307692
  • Office of First Year Experience & Family Programs 100707588539071
Academics
  • College of Humanities and Social Sciences: 111562041563667
  • College of Science and Health 103050539095857
  • College of Arts & Sciences 182839331203
  • Department of Professional Counseling 251906831497730
  • MA Nonprofit Leadership 504937856187405
  • Nursing Program 221855088228294
  • Community Music School 46268209033
  • School of Communications 49974367426
  • School of Education 69634589083
  • Walker School 146627752246
Other
  • Alumni Association 66104824300
  • Webster Cheerleading 341066602751892
  • ESL Program 108389429213726
  • Housing & Res Life 212476239061
  • Library 150344605432
  • Multi-Cultural Center (MCISA) 131678911783
  • Student Counseling 100526766680734
  • Study Abroad 107243735983187
  • UC Pool 351860239214115
  • Webster Staff Alliance 442023239335658
Locations — US
  • Extended Campuses 109128491936669
  • Webster Louisville 137404275004
  • Texas Region 104767815049863
  • Camp Lejeune 604530146381901
  • University Center 22323866020
  • Charleston, NC 870763882991317
  • Columbia, SC 345086612253909
  • Fort Bragg 167228473696823
  • Fort Gordon 1028634197222210
  • Fort Jackson 250581731482
  • Fort Leavenworth 107724659259578
  • Fort Leonard Wood 150626995017529
  • Fort Stewart/Hunter 310817815603410
  • Greenville, SC 269721643167
  • Kansas City 272376120628
  • Little Rock Area 553807501328353
  • LA Air Force Base 209217186062
  • Myrtle Beach 372775639451867
  • National Capital Region 297984353551109
  • Rolla 183983895998
  • Scott AFB 151884611554497
  • STL Extended Campuses 937606322985478
Locations — International
  • Leiden Campus 292745527458203
  • Ghana 547472355302378
  • Tashkent 2157272887918630
  • Vienna 53828871384
  • Athens

  1. Make sure to crop photo to 360 x 360, and make sure there is some space above subject’s head, and show some of the shoulders. Center face horizontally (not necessarily vertically) in crop. This is much more flattering than Zoomed in too close or cropped too close to top of head or bottom of neck (the face shouldn’t fill out the whole space - no "floating" heads). Also, degrees should not include periods. (Ex., MBA, MAT, MEd, etc.)
  2. When adding new entries, adhere to AP Style.
  3. Phone numbers use 314-xxx-xxxx format (no parentheses)

In OU Campus, Go to Add-Ons in the menu at the top of your page
Choose OU Search Admin Panel
Tools
Best Bet Groups
Manage Best Bets
Add Best Bet
Put in URL
Title
Keywords
Description
Update
Should show up right away.
When you go to the search on the site, using one of the keywords, the URL should come up in box titled "Featured Results"

The GMC Google Tag Manager account can be accessed by logging into the webstergmc@gmail.com Google Account (credentials in LastPass) and visiting https://tagmanager.google.com/

Additional users can be added through the Admin Panel: https://tagmanager.google.com/#/admin/?accountId=66419&containerId=72000

Tag Manager is used for added scripts, pixels, analytics tracking, and other third party code snippets to our websites.

This video tutorial will cover how to access the account, add tags and triggers, test newly added tags, and publish changes: https://drive.google.com/file/d/1HXuZA-EQliSYbu-fsYU6LoFbNSPyKxcM/view?usp=sharing

Additional Resources from Google

Always name your photos ending in the dimensions (i.e., 1600x634 or _298 or _555x438); this makes it easier to know which snippets that photo can be used in.

  • Webster Hero 1600x634 px.
  • Webster Gallery (component) 1110x622 px.
  • Webster Content Grid Carousel (or Pop Up) 1600x714 px.
  • Webster Content Grid Square Card 298x298 px.
  • Webster Call-out Card 555x444 px.
  • Webster Locked Slider 533x401 px.
  • Webster Image Card 377x377 px.
  • Webster Faculty 360x360 px.

To prevent broken links, it is best practice to always use dependency tags when available. Dependency tags link to content regardless of its URL address. This is true for web pages and images. If a page or image is later moved, the dependency tag link means that the link will be updated automatically. It also means that the Omni system will be able to track when there are broken links and issue a report for admin to see and fix. When using URLs, they do not always show up except when a Link Check is performed on the individual page.

Please note: any links in components are prone to be converted to URLs when a site-wide dependency scan occurs. If a hero image or button component stop working, this is the most likely reason.

Adding social media links in lower left side of footer:

  • Go to resources, includes, footer file
  • Check file out
  • Go to Source
  • Locate social media links block

<ouc:properties label="social">

                                <parameter group="Everyone" name="twitter" type="text" section="Social Links" prompt="Twitter">https://twitter.com/WebsterVienna</parameter>

                                <parameter group="Everyone" name="facebook" type="text" prompt="Facebook">https://www.facebook.com/WebsterVienna/</parameter>

                                <parameter group="Everyone" name="instagram" type="text" prompt="Instagram">https://www.instagram.com/webster_vienna/</parameter>

                                <parameter group="Everyone" name="youtube" type="text" prompt="YouTube">https://www.youtube.com/user/webstervienna</parameter>

<parameter group="Everyone" name="linkedin" type="text" prompt="LinkedIn">https://www.linkedin.com/school/webster-vienna-private-university/</parameter>

                                <parameter group="Everyone" name="tiktok" type="text" prompt="TikTok">http://www.tiktok.com/@webstervienna</parameter>

                </ouc:properties>

  • Add the new social media URL and handle for user (within the code line)
  • Save file
  • Publish file
  • Icon should show up on published version of homepage (may need to clear cache for it to show up properly)

NOTE: Must be done individually for each location site. 

Sample letter:
Hi Jessica,
Jennifer forwarded your email to me concerning adding Laura Wilkinson as an admin user for OU Campus/Omni CMS/ModernCampus. We would be happy to add her as a Level 4 user.

We do however, ask that she first review the attached website guidelines for photo sizes, snippets, etc., and the attached editorial stylebook for proper formatting and style of text, numbers, dates, and so forth. Also, she will need to visit the link below to review training resources for OU Campus to ensure all users adhere to the requirements for the new website for an overall cohesive and consistent site.

If you or Laura will let me know when she has finished reviewing the materials, we can proceed.

Thanks so much,
Vicki

Linked Documents:

  • Webster University Editorial Stylebook
  • Webster University Brand Guidelines
  • Webster University Brand Website Guidelines

Department / Campus Facebook ID

Webster University (Main Page) websteru

Academics

  • Centre Francophone francophonestl
  • College of Humanities and Social Sciences WebsterUCHSS
  • College of Science and Health WebsterUCSH
  • College of Arts & Sciences WebsterArtSci
  • Community Music School CMSWebsterU
  • Online WebsterOnline (Feb 2020)
  • School of Communications webster_SOC
  • School of Education Webster_SOE
  • Walker School websterwsbt

Other

  • Alumni Association Webster_Alumni (June 2020)
  • Confucious Institute ConfuciusWebU (Feb 2019)
  • Library WebsterULib
  • Military militarywebster (Feb 2021)
  • Multi-Cultural Center (MCISA) WUMCISA (Nov 2017)
  • Webster News WebsterUNews
  • WINS Webster_WINS

Locations — US

  • Colorado Springs WebsterColorado (Feb 2019)
  • Fort Leavenworth WebsterUFTLV (Mar 2019)
  • Kansas City WebsterKC (Feb 2017)
  • Little Rock Area WebU_littlerock (Mar 2020)
  • LA Air Force Base websterlaab (May 2017)
  • Orlando WebsterUOrlando (May 2019)

Locations — International

  • Athens WebsterAthens (Dec 2017)
  • Geneva WebsterGeneva
  • Georgia WebsterUGeorgia (Never)
  • Ghana WebsterGhana
  • Leiden Campus WebsterLeiden (July 2021)
  • Tashkent WTashkent (June 2021)
  • Vienna WebsterVienna

Sites > Users > search for name or sort by status (locked) and click the lock to unlock account.

Email:

I was just notified you were locked out of your account.

Assuming it was you, I unlocked it.

Normally, the user name is your full Webster email address, and initially, the password is the same as your Connections password.

The system will give you the opportunity to change your password in case you have forgotten yours.

Thanks,

See also: Training Criteria for New Omni CMS Users

Email:

Hello!

You are now set up as a new user.

Before logging in for the first time, please go to the website training resources available at #.

There is a style guide for determining how large photos should be, voice to use, etc.

There is also an editorial writing style guide with specific formats and style to use.

And a long list of training videos and tutorials for different tasks in OU Campus.

Please review these before logging in for the first time.

You can log in to the system using your full Webster email and your Connections ID password.

Thanks,

We discovered that the domain name is not case sensitive and if you want a vanity URL after slash that localizes it and it is then case sensitive. If you want all lowercase, we can create that within OU Campus. If we want uppercase, we have to go through Ben Schwartz in IT to get a 301 redirect, which then needs to be added to the 301 redirect Excel sheet (Vicki Bennington).

Basic Wufoo Recipe:

  1. Go to wufoo.com
  2. Log in: with user/pass from LastPass
  3. You see a list of our forms
  4. Click through Add a Field, Field Settings and Form Settings and most of the options will become apparent for editing and adding. Under Form Settings, Confirmation Options is where you would put a cash payment link.
  5. When you Save the Form (at the bottom), choose Set up email notifications and it will take you to screen where you will see where to put emails who will receive form when Submit is hit.
  6. If you choose Share this form, it will take you to a link and also code where you can embed it.

The general rule is that if the link goes to another page on a Webster University page, it stays in the current window. If it is going to take you to another site, they open in a new window so that the end user still has a window open to Webster.

Whenver possible, use a dependency tag rather than the actual URL. This will help prevent broken links and allow the system to auto-update whenever files are moved.