How to Create an User-Friendly Website with Custom Modules

How to Create an User-Friendly Website with Custom Modules

There are several platforms that will allow you to use custom modules. For now, we’ll focus on the HubSpot COS. COS stands for Content Optimization System, and it’s… well, it’s amazing! How so, you may ask?

It allows for a personalized experience to whoever visits your website. A returning customer will view a different layout and information than a first time visitor. The customer accessing your website from a smartphone will see something different than the PC visitor. It is, in fact, the first system that is optimized for mobile users from the get go.

This brings us to custom modules. Simply put, they will allow you to create your own set of content which will maintain its values across templates and pages on the COS. Additionally, you will still be able to select which content will be visible –and to whom- on a page-by-page basis, so the personalization brought about by the COS will not be lost or diminished in any way; quite the opposite, in fact, this will broaden your available options.

The modules include 5 unique field types: 3 content fields and 2 control operators.

Content Field

1. Text Field: short and sweet, this is for single-line text sections. Good for headers; great for cheesy one-liners. Hasta la vista, baby.
2. Rich Text Field: Rich Text Field is to the main dish as Text Field is to the aperitif. Headers and cheesy one-liners are informative and fun, hopefully both, but in order to create a successful website, you’ll need more than just that. Rich Text Field is used for multi-line text sections, and supports tinyMCE WYSIWYG interface, CTAs, images, and standard text. Yes, you read that correctly: with the help of custom modules, you too can goad your website visitors to GET THE FREE TRIAL in the middle of a rant!
3. Image Field: it allows for a single image, which size can me modified. It allows for default image and alt text parameters. Do you want to share your cute cat picture with the world? Goodness knows the Internet needs more of those, and with this content field you can help spread the word of Ceiling Cat… or perhaps Basement Cat? Don’t ask me, I’m more of a Moral Grey Area Cat. Do what you will.

Control Operators

1. Boolean Field: An on/off checkbox that allows the editor to enable or disable certain features from within the page editing interface. Literally as simple as turning on a light switch!
2. Choice Field: A multiple option field that allows for the selection and insertion of a predefined value into the content of the module.

These control operators can be used in tandem. For instance, you can make it so that the choice field will only be available if the designer or developer checks a Boolean field. This can make for complex, yet organized programming.

Speaking of conditions, “If statements” in custom modules will check by default, regardless of the module field value. Custom modules use a simplified syntax to check for values.

Finally, if you need to use an HTML template, you can embed your custom module by copying its ID number –you can find this in the Design Manager’s Custom Module tool-, and using it in the following syntax, after custom_widget_id=
{% custom_widget “unique_name_for_custom_module” custom_widget_id=1211011473, widget_name=’Internal name of custom module (the name of module in Design Manager)’, label=’In-app label of custom module (what the user will see in the content editor)’ %}

In conclusion, custom modules allow for the creation of personalized content. They can come in very handy in the creation of user-friendly websites, as they will retain their values across the various templates and pages in the HubSpot COS. It is even possible to transfer them to an HTML template, if you absolutely need to use it.

Please follow and like us: