Content & Design

• Email Headers and Footers
• Email Templates
• Translations
• User Portal Branding and Setup
• Pages and Content Blocks
• Templates and Design
• Form 11 Shortcodes
• User Information Shortcodes

Email Headers and Footers

Email Headers and Footers in OPS-COM allow administrators to define and manage reusable layout components for system-generated emails. By customizing these elements, you can ensure consistent branding, provide essential contact information, and apply uniform styling across all your automated email communications, creating a professional and cohesive user experience.

Using this Feature

Email Headers & Footers are managed through a dedicated section within System Configuration.

1. Hover over System Configuration, then Contents & Design, and click Email Headers & Footers.

The Email Template Layout List page displays the various sections of your email layouts (e.g., Header, Footer, Style). From here, you can select and edit the individual components that make up your email layouts.

Editing Email Layout Templates

1. Click Toggle Templates. Locate the corresponding Section you wish to edit (e.g., "Header" "Footer" or "Style").
2. Click the Edit button for that section.
3. Within the editor, you can:
   • Add or modify text.
   • Insert images (e.g., your organization's logo).
   • Include inline styles directly within the HTML to control appearance (e.g., colors, fonts, spacing).
4. Click Save Changes. You will see a message that your changes have been saved.
5. You can also archive your template by clicking the Archive Template button in the Top Right.
6. Click the Back button to edit other sections.

---

Best Practices & Considerations

• Consistent Branding: Use email headers and footers to consistently display your organization's logo, branding colors, and contact information across all automated emails.
• Essential Information: Ensure your footer contains crucial information such as your organization's name, website, and a general contact email or phone number.
• Mobile Responsiveness: When adding content and styling, consider how your headers and footers will appear on mobile devices. Use responsive design principles or simple layouts for best compatibility.
• Inline Styling: While the editor allows inline styles, for more complex or sitewide styling changes, coordinating with OPS-COM Support for custom CSS in the "Style" template might be beneficial.
• Testing Changes: After making any modifications to headers, footers, or styles, always test the email templates that use these layouts. Send a test email to yourself to ensure everything renders correctly in various email clients.
• Global Impact: Remember that changes made to these layout templates will affect all email templates that are configured to use them.

Email Templates

Email Templates in OPS-COM allow administrators to customize the content and appearance of automated emails sent by the system. By leveraging available shortcodes and a smart editor, you can create dynamic, informative, and engaging messages for various notifications, ensuring clear and consistent communication with users.

Using this Feature

To access and manage your default email templates:

1. Hover over System Configuration, then Contents & Design, and click Email Templates.
2. All the default email templates available in the system will be displayed. 

The Email Templates interface allows you to edit existing templates, utilize dynamic shortcodes, and configure various fields to tailor your messages.

Editing Default Email Templates

1. Locate the template you wish to edit in the list.
2. Click the Edit button next to it.
3. You will be taken to a dedicated editor interface where you can make changes to the email template.

Creating Templates for Other Languages

If you have other languages installed, you can click the Create button to create templates for these languages.

Email Template Fields - What do they do?

When editing an email template, you will configure the following fields:

• Label: This field is how you will identify your email template within the system's list.
• Type: This is a non-adjustable value that indicates the specific purpose or trigger for this email template (e.g., "Appeal Submitted," "Password Reset").
• Language: This field contains options to select the language for the template, typically supporting options like French or English.
• Layout: This allows you to select a pre-defined layout that surrounds your message. Layouts include your email header, footer, and overall styling. You can create or adjust email template layouts under System Configuration, then Contents & Design, and click Email Headers & Footers.
• Subject: This is the text that will appear as the subject line of the email message.
• HTML Content: Here you will write the main body of the message. This section supports rich text formatting, the insertion of images, and the use of shortcodes to create visually appealing and dynamic emails.
• Text Content: This section is a simple text editor for the message itself. It does not support shortcodes or any formatting. This plain text version is often used as a fallback for email clients that do not render HTML.

Using Shortcodes

Each email template has a set of available shortcodes that you can use to dynamically insert specific information into your message.

• The shortcode tokens are typically displayed on the left side of the template editor.
• For example, the email template for "Appeal Submitted by User" might offer shortcodes to automatically include details like [ticket_appealed_date] or [ticket_number], allowing you to craft messages without manually knowing these specifics.
• You can insert these shortcodes into the smart editor on the right side. The system will automatically replace the shortcode with the appropriate information when the email is sent to the desired user.
• The smart editor also provides formatting capabilities, allowing you to add images, format text, and arrange your messages much like a word processor.

---

Best Practices & Considerations

• Utilize Shortcodes Fully: Maximize the use of available shortcodes to make your emails dynamic, personalized, and informative, reducing manual effort and potential errors.
• Consistent Branding: Use email layouts (Email Headers & Footers) to maintain consistent branding (logos, colors, contact info) across all your system-generated emails.
• Clear Subject Lines: Craft clear and concise subject lines so users can immediately understand the purpose of the email.
• Review Both HTML and Text Content: Always ensure both the HTML Content and Text Content sections are populated and convey the message clearly. This provides compatibility for all email clients.
• Test Templates: After making changes to an email template, send a test email to yourself or a test account to verify that all shortcodes are rendering correctly, formatting is as expected, and the message is clear.
• Language-Specific Templates: If your system supports multiple languages, ensure you create and maintain separate templates for each language.

Translations

Where are Translations Supported

Currently, translations are only supported on the user side, however, they are managed and set up on the admin side, by admins that have the correct permissions set up to work with languages. 

Navigating to Translations

To begin reviewing, editing or creating your translations/languages, you will need to navigate to System Config → Content & Designs → Translations.

This will take you to the Installed Languages page where you can begin managing your current languages.

Adding New Languages 

To begin adding your own languages simply click Add Language on the Installed Languages page which will bring up a new modal to add a label and locale. 

When you are finished click Save Changes and your new language will be instantly added to the list. Once the language has been added, your users can begin using it on the user-side assuming you have the language enabled. 

The locales are used when we want to create sub-languages, while the label is used to identify our translations throughout the site. 

Adding Sub Languages and How do They Work

Sub-languages are created by using a locale that currently exists with an underscore '_' followed by the sub-language that you want to set up. 

For example, you can support multiple variations of the English language for your users. In the image below I have created a sub-language for American English using the locale en_us. 

When you create a new sub-language, it will automatically use the translations that have been set up on the main language, which is the locale on the left side of the underscore, such as en_us. You will need to create the main language first before creating any sub-languages, otherwise the sub-language will always default to English instead of the main language you may have intended to use. 

Installing Languages

Installing a language will create a new language template with the translations we have set up for it as well as the Name and Locale we have created for you. You can then click Edit Translations to adjust the preset translations to your liking. If there is not a language already in the system that can be installed you will need to add a new language and setup the translations yourself. Currently, we only support the ability to install French and English. 

Disabling or Enabling Translations 

We can choose to disable particular languages that we don't want to be selectable from the user side. To do this we can toggle the visibly of our languages under the Enabled column on the Installed Languages Page 

Once a language is toggled as Disabled it can no longer be selected by the users of your site as seen in the example image below. 

Searching Language Translations 

You can search for all translations that relate to a specific component in the system using the search bar at the top right of the Edit Translations page. For example, we can search for permits to find all permit related translations 

We can also go onto the user side and use the Token language, which will show all of the Names found on the Edit Translations page, under the Name column, (See the image above) to find where that translation exists so it can be changed. This can't be seen by logging is as the user from the user side but requires an admin to go to the profile of a user and click the Login as User button from the admin side. This is to ensure that your regular users don't see the token language option. 

The token language finds the tokens used so you can better search where the translations are being used on the userside. 

Edit Translations

To begin editing language translations you have to make your changes and then click away from the input field. Once you do this you will see that the translation gets highlighted in yellow indicating that a change has been made. The number of affected records will also display at the bottom of the translations page. 

When you are finished making your changes click Save Changes for the update to take effect. 

Delete Languages

To delete languages, you can click the delete button next to the language you want to remove. Keep in mind that if you remove the base English and French language it can be re-installed. However, if you delete a language that we do not provide you, then this data will be lost and you will need to contact support for assistance with recovering these translations. 

Keep in mind that deleting a language will not delete any of the sub-languages you may have created. For example, if I were to delete English, the English US language would still remain with all of its translations. 

Creating Templates and Messaging for New Languages

It's important to note that when you create a new language it will not rely on the default templates and system messaging that you have setup for your previous languages. For example, if I use the new French American language I created, and go onto the userside where languages are supported, then I will see a blank template as well as blank messages. 

Adding Templates

To add a new template for your languages that you create you will need to go into Templates & Design followed by Toggle Templates for the templates that are currently being used. From there you will have the option to click the Create button to add the new template. If you just want your new language to use the same template, from a language that is already in the system, just go into Edit and copy the text over into your new language, after clicking the Create button.

Adding System Messages

System messaging will work a bit differently than templates as you will need to go into each individual message and click the Edit button next to that message 

From there you should be able to select your new language.

If you want multiple messages to display for all your languages you will need to create a new system message and type out the translations for that language template. 

Changing Terminology Using the Translator

There is another use for the translation tool that may not be obvious at first. Since the translator is essentially a list of code terms and a corresponding list of what is actually displayed on any page not only can you edit the various languages but for each language you can also edit the display term to fit a local "version" of the term. A perfect example of this is in some areas one might refer to recieving a "ticket" as receiving a "citation". It is entirely possible to replace any spot in the interface where the term ticket is used with the term citation.

To do so go into the language editor and search for the term you wish to localize. In our example simply enter ticket in the search bar and hit return. A list of all translatable instances of the word ticket will appear. Click the box where the term is editable and type in your preferred term. In this case we are changing Manage Ticket Categories to Manage Citation Categories. Once you save the changes you have made the displayed text associated with Manage Ticket Categories will display as Manage Citation Categories throughout the system. You may edit the remaining instances of the word Ticket that are in the list before saving to change the term in bulk for all entries listed.

User Portal Branding and Setup

OPS-COM administrators can define global default branding for the User Portal. By configuring the Default Site Logo and Default Site Header, you can ensure consistent branding and visual presentation across your OPS-COM User environment.

Setup & Configuration

Default images are configured within the Global component of the System Settings.

1. Hover over System Configuration, and click System Settings.
2. Click the Global settings tab. Within the Global Setting section, you will find two key areas where you can configure images:
   • Default Site Logo
   • Default Site Header

Setting the Default Logo

1. Next to the Default Site Logo setting, click on Select Image.
2. You will be taken to the Manage Files section (your file repository).
3. Browse your computer or search for the image you wish to use as your default site logo.
4. Select the desired image.

Follow the Uploading and Managing Files guide for best practices regarding file management and organization.

Setting the Default Header Image

1. Similarly, next to the Default Site Header setting, click on Select Image.
2. Follow steps 3-4 above.

Once the images are selected, their file names or previews will appear in the respective configuration settings fields. Remember to Save Settings to apply these selections.

Observing the Changes

These default images serve as fallbacks and will appear in various places throughout the OPS-COM system if no specific logo or header is set in other areas (such as the Contents and Designs section).

Common places where these default images are utilized include:

• The User Portal (e.g., your public-facing permit purchasing site).
• The phone interface utilized in features like Real-Time Parking.
• Mobile apps, Text2ParkMe, and QR code interfaces 

---

Best Practices & Considerations

• Branding Consistency: Use high-quality, appropriately sized images that reflect your organization's branding for both the logo and header.
• Optimization: Ensure image files are optimized for web use (e.g., compressed, appropriate resolution) to ensure fast loading times on all interfaces.
• Global Impact: Remember that these are default settings. If you have specific headers or logos configured in other sections of the system (like individual email templates or specific public pages), those specific configurations will override these global defaults.
• Accessibility: Consider the visual accessibility of your chosen images, especially for text overlays or contrast, if applicable to your header design.

Pages and Content Blocks

Accessing System Messaging

To access and manage your System Messaging navigate to the gears icon  and click on Content & Designs -> Pages and Content Blocks.

Creating Pages

We also provide a video to visually demonstrate how to use system messaging https://drive.google.com/file/d/1DU3qorWnAp_2N9mcNGFYTttNHMeRpXsQ/view

Pages display the visual content found throughout your application. You can edit the contents of your page or post a System Message by using the Disclaimer Shortcode on the Page you want it to show up on. Shortcodes also make it convenient to add interactive content to your pages. For more information on Shortcodes scroll to the bottom of this page. 

Important: Make sure you select Page under the drop-down menu next to Page Type and not Message. Below we will go into detail on how to create a Page field by field. The images below give you a good visual example of what field is being explained, if there is a certain field you are unsure about you can easily find the picture and read from there.

Content Placement

Depending on where you place your content it can appear differently. OPS-COM's smart editor reads content top to bottom, left to right. Meaning that placing a user login Shortcode before your content will look dramatically different than if you placed the Shortcode last. You can see a few visual examples of how this works below. 

For Example: Shortcodes Before Content

As you can see this displays our lot information before our content. 

For Example: Shortcodes After Content 

As you can see this placed the Shortcode after the lot information

Editing Pages 

Keep in mind that the URL / System Location next to the page is the area in OPS-COM that you are updating. Therefore, if you wished to update the permit screen, you want to edit the page with a System Location of /permits.

You can edit your pages attributes such as the Title, Path, Visibility, Language, Layout, and Content after it has already been created.

Creating System Messages

Important: Users will be brought back to the Users page if users do not agree with a System Message. Meaning, we use System Messaging as a convenient way to offer agreements and disclaimers before users make purchases of permits or lockers. 

System Messages and How they work with Pages 

System Messages and Pages work together using Disclaimer Shortcode's. When you create a System Message, you give that message a unique Identifier. System message identifiers may be used in junction with Disclaimer Shortcodes to display your System Messages onto Pages. The idea may be daunting at first, but once you get a better understanding of how these features work together, it will make more sense. 

Visual Example

System Messages provide you with a convenient way to add alert messages to your pages that pop-up when a user clicks the page. You may create System Messages to be displayed on specific Pages using Disclaimer Shortcode's.

Warning: Clicking Return to Template List before Save Messaging will discard all the changes you just made, meaning that the System Message will not get created or your changes will not occur. 

Editing System Messages

You can manage your System Messages Title, Identifier, Visibility, Language, as well as modify the content to include text, images, or Shortcodes.

Add System Messages to Pages using Shortcodes

Now that you know how to create your Pages and System Messages you can bring them together using a Disclaimer Shortcode. A Shortcode is a small body of code surrounded by [ ] used to display complex templates or features. Shortcodes limit the technicality of our system by offering a convenient way to add interactive content without having to know how to script or code. 

Please review the Shortcodes for Use on the User Portal for a detailed description of how shortcodes work. You can also find a list of Shortcodes currently available to you by going to the OPS-COM Shortcode Documentation. 

Templates and Design

Overview

The User Portal system allows your clients to register, add vehicles, purchase permits and pay violations. It is an important extension of your business, and it should reflect your corporate branding.

Pages and Templates

The OPS-COM user Page will store the functionality and content of your main page, while the Templates will be used to change the functionality of your pages as well as the content around the Page. 

Where to Find Templates and Design

Click System Configuration, Templates & Design to access these features. 

All Default Templates 

If at any point you feel that you have adjusted the Default <scripts> and <styles> to the point of breaking your site, or you are simply unsure what your changes have done, you can refer to these templates to restore your pages functionality and style.

Understanding Templates & Design 

Templates & Designs are the visual functionality of your web page structured around your Page content. OPS-COM provides you with default templates which allow you to get started easily without having to know any code. 

• Once you are on the landing page for Templates & Design, you can view a list of your current templates, or create a new one. Templates contain all of the sections found on your User Portal except for the Page content found in the middle of the page. To adjust this you will have to leave Templates & Design and navigate to System Messaging. 

• OPS-COM gives you a total of 12 section templates, 6 in English and 6 in French. (Of course, you will have to create the French content yourself as we do not provide a translator).

1. Clicking on Toggle Templates will display all of the sections attached to that template. Templates can be created in English and French. 
   
   
2. The contents of our pages are split into four separate sections. Header(1), Content Header(2), Content Footer(4), and Footer(5). See Template Layout right below this guide to get a better understanding of the OPS-COM layout. 
   
   
3. To edit a template Section, simply click Edit next to the section name. 

Template Layout

Below is a visual example of how your Pages are split into Sections using Templates. All of the Content (3) of our Pages are added through the System Messages under Pages. 

1. Header - The header of your page, where you can find your header image and user navigation. 
   
   
2. Content_Header - Another header section for you to place content into, such as alerts or user information. Everything placed here will appear before the Content and Content Footer.
   
   
3. Content - The content of your pages. Content may not be added from Templates & Design and will require you to navigate to System Messaging. 
   
   
4. Content_Footer - The footer of your Content. Everything placed here will appear after the Content Header and Content. Again, you can use this to display alerts, messages, or additional content to your Template. 
   
   
5. Footer - The footer of your page is where you can find useful information. You can use this area to advertise important information your users might need while using your system. 

Page Layouts and Templates 

Creating Layouts

To create a layout simply click the Create Layout button found at the top right of the Layouts page. 

You will be presented with the Add Layout system message. 

1. Provide the name of your layout. In this example, we are going to create our own Summer Layout to be used, instead of the default layout.
   
   
2. Click Save Changes when you are happy with the name of your layout. Once the Layout has been created, you can see it under the Layouts list. 
   
   
3. If you wish to cancel the creation of your layout simply click Close. 
   
   
4. You can see that our Summer Layout was added to the end of our Layouts List with no sections yet. 
   
   
5. You can choose whether or not your template is the Default template at any time by clicking the Non-Default drop-down and selecting Default.
6. Anytime you add sections to your Templates it will display how many are attached next to Toggle Templates. As you can see, we don't have any Sections created yet so there are no numbers to be displayed, otherwise, clicking on Toggle Templates would show you a list of all the templates currently attached to that Layout.

      7. You can edit the layout name by clicking on the Edit button next to archive.

      8. If you would like to archive a layout that you are no longer using, you can click the Archive button next to edit. 

Creating Templates

Now that you have a better understanding of how Templates work with Layouts we can start creating our own. 

1. Click on Toggle Templates. 
   
   
2. Clicking this will display the available Templates attached to the Summer Layout. 
   
   
3. You can now Create a variety of templates for your page, including bilingual support. 
   
   
4. If you are non-technical, it is advised not to change the code for Scripts, Styles, Header, and Footer Templates. You can use the default Style, Script, Header, and Footer Templates from All Default Templates. These can still be edited according to your company and their style guides. See Edit the Page Style and Edit the Page Behaviour below for more information. 
    

Edit the Page Style (CSS) 

Important

This guide is used if you intend to adjust the Templates provided to you by OPS-COM. If you choose to rewrite your own Templates you can choose to ignore this.

  

Edit the Page Behavior (Scripts) 

Disclaimer

Please review the list of supported scripting languages below. If a Javascript vendor is unverified it may break the functionality of your site.

API Integration

Additionally, you can use our API to integrate with pay stations and other devices that will allow you to grab useful information from your users. 

Form 11 Shortcodes

Information

When issuing a Form 11, there are a number of shortcodes that can be placed in the template to auto-fill values relating to the violation.

The base short code is formatted like:

• [values show=violation._____]

The blank value must be filled with a value to pull from the violation info.

For each nested value in the data packet, the packet name must be added as part of the variable name, each part separated by a period, with the variable to be output by the shortcode as the final part of the variable.

The packet itself is called by 'violation', and the name must be placed at the start of any value call.

Violation Packet

The violation info packet is formatted like this example.

The values on the left are the variable names, the values on the right are the example values returned by this packet.

{
    "ViolationID": 237,
    "SemPermitID": null,
    "Ticket": "TT-19026",
    "VehicleID": 5,
    "Spoiled": 0,
    "TicketType": 1,
    "Issued": "2024-07-17 16:11:00",
    "convNotice": null,
    "Due": "2024-07-27 16:11:00",
    "ViolationTypeID": -1,
    "Fine": "50.0000",
    "AdjustedFine": "20.0000",
    "Towing": "0.0000",
    "taxAmount": "0.0000",
    "Writer": 7,
    "LocationID": 10,
    "Comment": null,
    "TicketAppeal": null,
    "appealType": 0,
    "appealFormat": null,
    "AccessAdminID": 50,
    "ActionedPer": null,
    "Created": "2024-07-17 20:12:08",
    "AppealUserID": 0,
    "AppealProcessDate": null,
    "AppealAdminID": 0,
    "AppealComment": null,
    "AppealAdminComment": null,
    "AutoNotice": 0,
    "ProcessedByCollection": null,
    "SentToCollections": null,
    "PrivateComments": "",
    "DriveAway": 0,
    "UUID": null,
    "VioNotice": null,
    "latitude": null,
    "longitude": null,
    "Warning": null,
    "userid": null,
    "incidentID": null,
    "failToIdentify": null,
    "pin": "YL",
    "duplicate": null,
    "AdjustmentReason": null,
    "notices_count": 1,
  
    "user_info": {
            "UserID": 5,
            "studentNo": null,
            "employNo": "00800147",
            "username": "mashbury",
            "firstName": "Michael",
            "preferredname": null,
            "lastName": "Ashbury",
            "street": "688 Zaproxy Ridge",
            "city": "East Romaineburgh",
            "prov": 9,
            "postal": "K2G5B1",
            "email": "mash-bury@tomahawk.ca",
            "display_name": "Michael Ashbury",
            "account_no": "00800147",
            "prov_name": "Ontario",
    },
  
    "writer": {
            "AdminAccessID": 7,
            "Username": "admin",
            "DisplayName": "Administrator"
    },
  
    "vehicle": {
            "VehicleID": 5,
            "Active": 1,
            "Plate": "MASH",
            "Year": 1998,
            "TotalVio": 12,
            "TotalUnpaid": 2,
            "TotalWarning": 0,
            "vehicleAlert": true,
            "vin": "JNAMA43H9XGE50339",
            "electric_vehicle": false,
          
            "province": {
                    "ProvName": "West Virginia",
                    "ProvCode": "WV",
            },

            "make": {
                  "MakeName": "Toyota"
            },
            
            "colour": {
                  "ColourName": "Black"
            },
            
            "plate_type": {
                  "TypeName": " Passenger"
            }
        
            "vehicle_type": {
                  "TypeName": " Van"
            },
      
    },
  
    "location": {
            "LocationID": 10,
            "LocationName": "Hospital & Administration Building",
    },
  
    "details": {
            "ViolationsDetailID": 359,
            "ViolationID": 237,
            "Ticket": "TT-19026",
            "ViolationTypeID": 16,
            "LocationID": 10,
            "offenceFine": 50,
            "discountFlag": 1,
            "discountAmount": 20,
            "discountHours": 240,
          
            "type": {
                    "ViolationTypeID": 16,
                    "ViolationDescr": "No Parking Snow Route - Mandatory Towing",
                    "DefaultCost": 50,
                    "discountFlag": true,
                    "discountAmount": 20,
                    "discountHours": 240,
            }
    }
}

Examples

An example shortcode is provided for each section. To return a specific value in the same section, replace the provided variable name with the sibling value wanted for output.

Example Shortcode	Description
[values show=violation.Ticket]	Returns the violation ticket number.
[values show=violation.user_info.username]	Returns the username of the user the violation belongs to.
[values show=violation.writer.DisplayName]	Returns the display name of the admin who assigned the violation to the user.
[values show=violation.vehicle.Plate]	Returns the plate of the vehicle the violation was assigned to, if applicable.
[values show=violation.vehicle.province.ProvName]	Returns the province or state of the vehicle plate.
[values show=violation.vehicle.colour.ColourName]	Returns the colour of the vehicle.
[values show=violation.vehicle.plate_type.TypeName]	Returns the plate type of the vehicle.
[values show=violation.vehicle.vehicle_type.TypeName]	Returns the type of the vehicle.
[values show=violation.vehicle.make.MakeName]	Returns the make of the vehicle.
[values show=violation.location.LocationName]	Returns the name of the location the infraction happened.
[values show=violation.details.0.Ticket]	Returns the violation ticket number. Alternate value location.
[values show=violation.details.0.type.ViolationDescr]	Returns the violation type description.

User Information Shortcodes

Shortcodes

Shortcodes used to display user information.

Keep in mind that the shortcode descriptions are also on the email template page for lost passwords. 

Shortcode	Description
[user show="firstname"]	The first name of the user account receiving the email or messaging.
[user show="lastname"]	The last name of the user account receiving the email or messaging.
[user show="email"]	The email address of the user account receiving the email or messaging.
[user show="username"]	The username of the user account receiving the email or messaging.
[user show="salutation"]	The salutation of the user account receiving the email or messaging.