Advanced Website Customizations

Introduction

If you have front-end development knowledge and want to make your website more personalized, you can learn how to customize your website with the information provided in this article.

To access this setting, navigate to the CMS Tool > Settings > Tools> Custom Style & Script

On this section of the settings, you will see two parts: 

Script

In this section, you can write native JavaScript to manipulate the websites. Note that you do not need to write “script” tags and there is a Chrome extension named Vue Devtools which can be used to find the correct attributes that you want to edit.

For example, if you want to change the logo image on the header just on the listing pages, you can write code like the following:

if(window.location.pathname === '/listing') {
    siteAppVm.moduleData[0].data.logo = "https://cdn.chime.me/image/fs/sitebuild/202019/22/original_ 2cdb9a93-6ac7-48b5-8ff2-a7e942c1baf4.png";
}

Vue uses the concept of MVVM which means the view is rendered by the corresponding data model. Changing the data of the corresponding Vue component has the potential to change many styles of the page.

“siteAppVm” is the root component of this page. You can find its child components in the array named “moduleData” and then find the related attributes you want to edit. Vue's data binding and responsive mechanism will automatically re-render the page. 

Please note that if you do not want to make a global modification, you can make a judgment based on the URL or other markers before changing some data in order to control the change so that it only appears on the specified page. 

For more information, you can find other attributes via the Vue Devtools:

Style

In this section, you can write CSS code to customize your pages. Notice that the “<style>” tag is not needed anymore.  However, if the length of your CSS code has exceeded the maximum length limit or you need to use some third party codes, you will need to reference code by URL and we provide an API for you to do so.

You can use the function Util.addStyle(url) to add external CSS code into your page, for example:

Util.addStyle('/site-static/site-init.css');

The external CSS code will be appended to the head of the HTML document and this function will return a promise so that you can use util.addStyle(url) to then define callback functions.

EXAMPLE

Below is the JavaScript code of a third party widget. How can it be added to the Chime site?

<script type="text/javascript">
var _userway_config = { account: 'testchime' };
</script>
<script type="text/javascript" src="https://chime.me/widget.js"></script>

First, you need to copy and paste every single line inside “<script>” and ”</script>." For example, you would need to copy:

winow._userway_config = { account: 'testchime' };

Second, you need to use the function Util.addScript(url) to add external JavaScript code into your page. For example:

Util.addScript (https://chime.me/widget.js)

In summary, add the following to Script

window._userway_config = { account: 'testchime' };
Util.addScript (https://chime.me/widget.js)

The external JS code will then be appended to the body of the HTML document and this function will return a promise so that you can use util.addScript(url) to then define callback functions.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <support@chimeinc.com> or by phone at 1 (855) 981-7557.