# Introduction Isomer is informational website builder for the government. This guide is intended for Isomer sites that were: 1. Created prior to the implementation of IsomerCMS, and 2. Were not designed to be editable via the CMS If your Isomer site was created after 2021, this guide is not applicable to you. Please refer to our [main guide](/configurations/contact-us) for more information. {% hint style="danger" %} This guide will eventually be phased out and taken down, following the launch of IsomerCMS {% endhint %} # Github Account Setup You should get your Github account setup before starting to work on your first page Before you can edit your Isomer site, you must create a GitHub account and be assigned the proper permissions. {% hint style="danger" %} The images in this guide may be outdated but the overall steps remains the same {% endhint %} ### Sign up ![Github sign up page](/files/-MFfZgZj7CsvXEA9989j) Go to . Proceed to sign up for an account using your preferred email address and a professional username. ### Select the free plan ![](/files/-MFfZwQBSHp6iCOYH0be) 1. You will only need a basic account on GitHub to edit the content of your Isomer website. 2. Under `Choose your subscription`, select `Free` to opt for the free plan. 3. Click on `Continue` when the correct option is selected. ### Tailor your experience ![](/files/-MFfZzS4GLItE-7BUU8Q) You do not need to tailor your experience at this moment. Click on `skip this step` ### Verify your email ![](/files/-MFf_13w3NxZ0Qeju-Rc) After signing up, go to your registered email address. You would've received an email to verify your email address. ![](/files/-MFf_G67vGWZ6y61xfHk) Proceed with the **verification**. ![](/files/-MFf_LlMQCYrSBxAEhYF) Upon returning to GitHub, you will see a banner notification that your email is verified. Next, you should make sure that you have your 2FA set up, find out more in the [next](/setup/create-a-github-account/set-up-2fa) page. # Set up 2FA Accounts with 2FA set up blocks off 99% of automated attacks. Hence, isomer enforces all our users to have this enabled in their accounts. ### Go to your settings After verification, you will need to do some additional set-up. Go to your account settings by clicking on your profile picture on the top right hand corner of the page. ![](/files/-MFf_QVyVD1OmLGgJstD) Select 'Settings' and you will be redirected to a new page. On the left-hand side of the page, look for the 'Security' tab and select it. Here, we will be setting up two-factor authentication (2FA). ![](/files/-MFf_V-LTj9eFAWZk36C) ### Enable 2FA Before working on Isomer websites, you will have to set up two-factor authentication (2FA) to secure your account. Note that 2FA is required for all Isomer repositories. Click on ‘Enable two-factor authentication’ to proceed. ![](/files/-MFf_jiOXca85qycQbE5) ### Choose 2FA authentication method Select a 2FA authentication method. You have a choice between using an app (such as [Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2), [Authy](https://authy.com/), or [LastPass](https://www.lastpass.com/)), or via an SMS message. ![](/files/-MFf__w4M22ugv-yu4--) ### Save your recovery codes ![](/files/-MFf_r2LgH2Fvfyk7z4z) GitHub will prompt you to save your recovery codes. The purpose of these codes are to guarantee you are the owner of your account in case your 2FA fails, such as when you lose your phone. We strongly encourage saving these codes somewhere secure. After selecting one of the methods to save the codes, the 'Next' button will be enabled. Proceed. ### Complete 2FA setup Set up your 2FA as prompted by GitHub. 1. You'll be prompted for a `trial run` of your 2FA, where you must enter the generated 2FA code to make sure that your 2FA setup is working in order to proceed. 2. Once done, click `Enable` to enable 2FA on your account. 3. You will then see a banner notifying you that `Two-factor authentication successfully enabled!`. ![](/files/-MFf_uMdr7M0wjYDcIPe) Now you are ready to gain access to your Isomer website repository. # Site Access Now that your GitHub account is all set up. You will need access to your site to start editing. To gain access, email the Isomer Team at and let us know your **GitHub username** and which **website** you're managing. {% hint style="info" %} **UPDATE - Jan 2021** [**You can now grant yourself access to your repository through a FormSG form.**](https://go.gov.sg/isomer-access) **If your email is not whitelisted in the verification step, let us know.** {% endhint %} Upon being added to the repository, **you will receive an invite on your registered email.** {% hint style="success" %} Besides email, you can visit [www.github.com/isomerpages](https://v2.isomer.gov.sg/setup/www.github.com/isomerpages), look for a button at the top right hand corner of the page and click that button to accept the invitation. {% endhint %} ### Accept the invitation ![](/files/-MFfaFqOMaJG1FEN-zg-) Click on `Join Isomer` and you are all set! You will now see a banner notifying you `You are now a member of Isomer!` ![](/files/-MFfao5HQdQmX7TPrXdK) ## What are the user access types? **All users on Isomer holds the same access type, editor access**. With editor access, you'll be able to make changes to your site, create a pull request before you launch it, and approve someone else's request. We do not provide pages specific restricted access but do note that all changes are tracked (even a single full stop you add to or remove from the page). That being said, do make changes to your site responsibly as all these changes are being tracked. All isomer team members are admin users (with the ability to create new site, add and remove users, and grant permissions to users) # Your first edit Make sure that you've gotten your Github account ready. If not, please refer to [Create a Github Account](/setup/create-a-github-account). First, head down to Isomer's Github Organisation ([www.github.com/isomerpages](http://www.github.com/isomerpages)). You can look for your site using the search bar. If you encounter any problems, you may contact the team. {% hint style="info" %} A repository is like a Google Drive folder where your site's content and data are stored. {% endhint %} In this guide, we'll use the FAQ page for you to make your first edit. Make sure you're in the `staging` branch. We've set staging as your default branch so there is no need to change it. Open the `pages` folder, and click on `faq.md`. Once in, click the edit button (an icon that looks like a pencil). The content of Isomer sites are written in Markdown. You can ignore the stuff at the top of the page, between the pair of triple dashes (`---`). Type something after the second set of triple dashes. The file should now look something like this: ``` --- title: FAQ permalink: /faq/ --- Hello, Isomer! This is my very first edit! ``` Scroll to the bottom of the page, and add a simple note of the changes you've made under 'Update faq.md'. You can also add more details in the subsequent large text box. {% hint style="info" %} Make sure the option **'Commit directly to the `staging` branch.'** is selected, and click **'Commit changes**'. {% endhint %} ![Select commit directly to staging.](/files/-MT-in5ELTc_LZH0o6S6) Wait for about a few minutes, then head to your site's staging site (which is provided by the isomer team, it typically has this format . On the staging site, head to the FAQ page. Congratulations! You have just made your very first edit to an Isomer site! ## ***Additional information*** The moment a commit is made on GitHub, GitHub sends the updated content of your site to [Netlify](https://www.netlify.com/) that we use to build Isomer sites. Netlify then downloads the central Isomer theme, weaves your content into the theme, building a complete site. This build process usually take less than a minute for most Isomer sites, but larger Isomer sites can take up to 10 minutes. # Create a new page The next step after editing your first page is to create a new page! As you might recall, each Isomer Markdown file looks something like this: ``` --- title: FAQ permalink: /faq/ --- Hello, Isomer! This is my very first edit! ``` The words between the 2 sets of triple dashes (---) is called the *front matter*. The front matter is where you configure the title and url for each page. Most pages will only have these 2 options (`title` and `permalink`), but some pages, like the [home page](https://app.gitbook.com/configuration/home/overview/) and [contact us page](https://app.gitbook.com/configuration/contact/overview/), have more. {% hint style="info" %} Permalink refers to the url of that particular page on your site. You will notice that permalink looks like this **`permalink: /my-page`** Any pages on your site will have an URL that always starts with [www.your-site.gov.sg](http://www.your-site.gov.sg). Hence, we've excluded all the details before / and you only have to specify the **variable part of your site url**. {% endhint %} Now that you know about the front matter, let's get started creating your new page! ***Creating new page*** 1. Head to the staging branch, and go into the `pages` folder. 2. Click the 'Add a file' button (it's to the upper right hand corner). Select 'Create a new file' 3. Give a file a name, such as `myfirstpage.md` {% hint style="info" %} Note that your page is in Markdown format, hence the file name must end in `.md`. GitHub won't be able to automatically add that for you! {% endhint %} ***Next, insert your content*** Now that you have named the file, you're free to add your content. You could copy and paste the Markdown above, or write your own! If your site already has a page with the permalink `/faq/`, remember to change the permalink to something else! One of the 2 pages will not be accessible if they have the same permalinks. {% hint style="info" %} Permalinks are the url of your page. On isomer, you only have to specify the variable part of your page URL since all the pages will start with the same domain. For example [www.agency.gov.sg/my-pag\e](http://www.agency.gov.sg/my-pag\e);**. T**he permalink is **/my-page** {% endhint %} ***Click the commit button to save the changes*** Once you're done, enter a commit message, make sure the 'Commit directly to the `staging` branch.' option is selected, and hit the green commit button. Just as before, your changes are now accessible on the staging site! (you might need to enter the permalink directly into the address bar) ## # Create a new collection A collection is like a folder that contains a group of pages. A page is like a file in your Github repository. {% hint style="info" %} **A collection can only exist when there is a page inside. So you must create a page in a collection.** {% endhint %} ![On Github, a collection is a folder](/files/-MP5Bz0MO7EFygR5wzfg) **Step 1** Create a file, which will represent a page on your site. ![](/files/-MP5CI_vieOxqRgER1s5) **Step 2** Specify the folder name {% hint style="success" %} A folder for a collection should always **start with underscore (\_).** **Replace spaces between words with dashes (-)**. Always keep **all file and folder names in** **small caps** {% endhint %} ![](/files/-MP5EkG04aIX_cCFzVtI) **Step 3** Add a forward slash to fix the folder name and set a file name. A file name usually corresponds to your page name for easy reference. ![By typing the forward slash, you're fixing the file path of the folder](/files/-MP5EuyLWRCiYS5ZEnE-) **Step 4** Specify the title and permalink of the page ### Things to note: 1. You should enclose the title and permalink inside three dashes `---` 2. Permalink **should not** have any spaces in between. 3. If you're creating a page inside a collection, you should specify in the permalink that the page is inside the folder. For example, for a page named `My page` inside a folder called `My New Folder`, the permalink will look like this `/my-new-folder/my-page/` ``` --- title: New Page permalink: /my-new-folder/my-page/ --- ``` **Step 5** Scroll to the bottom and click commit at the bottom of the page to save the file. # Format your content Isomer user markdown to format your page content. This includes bolding your text, inserting images or hyperlinks. Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is simply regular text with a few non-alphabetic characters thrown in, like `#` or `*`. For a quick, interactive introduction to Markdown, you can try out the Markdown tutorial at {% hint style="info" %} If you're an advanced user and would like to use HTML on an Isomer page, you can! As the HTML code is inserted by you, Isomer team will not be able to support and troubleshoot problems relating to the HTML code that you inserted. {% endhint %} **To find out a list of common markdown formatting that are commonly used on isomer site, refer to the cheatsheet on the next page.** # HTML cheatsheet A list of useful guide on formatting your page using HTML ## **Creating break lines** Sometimes you’ll encounter instances where lines are sticking together in one line even though it is correctly formatted in markdown. For example, I could have the below text in markdown: ``` This is a line with break ``` But if you refer to the image below, the lines of texts are still on the same line. ![](/files/-MQQtx6ki61uIaGy4shW) To ensure your line breaks as intended, you'll have to add `
` html tag. You may do so in the following manners as shown below. ``` This is a line with
break ``` or ``` This is a line with
break ``` Either way works fine. As you can see with the example below. ![](/files/-MQQvBkO9S1EU0zCdKhZ) # Markdown cheatsheet A list of useful guide on formatting your page using Markdown This is intended as a quick reference and showcase, to aid you as you draft your site's pages. If you're looking for something that isn't covered here, we encourage you to refer to other more comprehensive Markdown guides on the internet. If you still feel you need more assistance, feel free to reach out to us for help through Slack or email. If you find learning this is too much of a hassle, you can use [StackEdit](https://stackedit.io/app), a free online What You See Is What You Get (WYSIWYG) editor that you can use while you draft your pages. #### Text ``` This is some normal text. *This sentence is in italics.* This **word** is in bold. ``` The above Markdown will produce: This is some normal text. \ *This sentence is in italics.* \ This **word** is in bold. **Anchor text** ``` [Click here to go to header](#this-is-the-header) ## This is the header ``` ``` [Click here to go to header] ``` This line is what the visitors of your site will see. ``` (#this-is-the-header) ``` This line is the header you wish to link to, separate spaces by dashes. ``` ## This is the header ``` This is the header in markdown. Make sure to separate the words by dashes instead of space and all of the inputs are in small letters. Clicking on the text “Click here to go to header” will now lead to the header that is named “**This is the header**”. ![](/files/-MQXT9R2OBV4a-QcXN6H) {% hint style="info" %} Make sure that the anchor you want to go to uses the markdown heading style and not \

tag in HTML {% endhint %} #### Headers Headers are the big titles and subtitles on your page. For example, the headers you have seen so far on this page are "Text" and "Headers". Headers come in levels, with a level 1 header (aka `H1`) the biggest level usually used only for page titles. ``` # This is a level 1 (H1) header! ## This is a level 2 (H2) header! ### This is a level 3 (H3) header! #### This is a level 4 (H4) header! ``` The above Markdown will produce: ## This is a level 1 (H1) header! ### This is a level 2 (H2) header! #### This is a level 3 (H3) header! **This is a level 4 (H4) header!** #### Lists ``` 1. First ordered list item 2. Another item * Unordered sub-list. 1. Actual numbers don't matter, just that it's a number 1. Ordered sub-list 4. And another item. You can have properly indented paragraphs within list items. Notice the blank line above, and the 3 leading spaces which align the raw Markdown. * Use asterisks for unordered lists, aka bullet points ``` The above Markdown will produce: 1. First ordered list item 2. Another item * Unordered sub-list. 3. Actual numbers don't matter, just that it's a number 1. Ordered sub-list 4. And another item. You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces which align the raw Markdown. * Use asterisks for unordered lists, aka bullet points #### Links Links come in several flavours: ``` [I'm a link within the site](/configuration/navbar/overview/) [I'm an link to an external site](https://www.google.com) URLs must be wrapped in angled brackets to turn into links: ``` The above Markdown will produce: [I'm a link within the site](https://app.gitbook.com/configuration/navbar/overview/) [I'm an link to an external site](https://www.google.com) URLs must be wrapped in angled brackets to turn into links: ## Numbering items in sequence Markdown treats all numbers as a numbering sequence when you add a full stop to it. ``` 1. 2. 3. ``` However, if you have a bullet points or numbers within the first point above, you may notice that the numbering sequence will be restarted. ``` 1. 1. 1. ``` To fix this, you can use a backslash between the number and period (.) to break the numbering sequence in Markdown. See below: ``` 1\. - - 2\. - - 3\. ``` #### Images To place an image in your Markdown file, first [upload the image](https://app.gitbook.com/github-repository/uploading-a-file/) into your `/images/` folder. Then use the following Markdown syntax: {% hint style="danger" %} Please make sure that you have **alt-text** on all your images as this will affect the Accesibility Score on WOGAA {% endhint %} ``` ![alt text - this is a description of what is in the image for people with visual impairments using screen readers](/images/isomer-logo.svg) ![just like links, you can include titles which appear when hovered](/images/isomer-logo.svg "Isomer Logo") ``` The above Markdown will produce: ![](/files/-MJZexq6fQOEMF6knjE1) ![](/files/-MJZexq6fQOEMF6knjE1) {% hint style="info" %} Note that Alt text is not required for Hero Banner, social media sharing image, your site logo. Alt text on homepage is also specified differently through the field `alt:` \ You can find out more on [Homepage](/configurations/homepage) section {% endhint %} #### Resizing Image Although there are markdown and HTML codes to help with resizing images, we generally don't recommend users to use them because the code that you have entered may not display well as intended on different internet devices. So we recommend resizing images manually and then upload them onto your Github repository. You may choose to use any free tools online but we recommend using [PicResize](https://picresize.com/). #### Videos To embed a video on your page, simply copy the iframe code from Youtube or Vimeo after you've uploaded your video, and paste it onto your page. ![Example of iframe snipped on Youtube](/files/-MJZfCE9fO7FrALJVrKa) {% hint style="info" %} Note to insert `
` tags to ensure that your video renders appropriately. See below. {% endhint %} ```
``` ### **TIP: How to get iFrame code from Youtube?** **Step 1.** Go to the video on Youtube. **Step 2** Click the Share button ![](/files/-MP5JOwU_W6xC2NbsWN9) **Step 3** Select Embed ![](/files/-MP5JI01y8i4SaOS0lps) **Step 4** Copy the code snippet on the right ![](/files/-MP5JYpKV9s90U0Oi85D) # Page config The configuration you set on every page is called Front Matter The front matter is the stuff enclosed in 3 dashes at the top of the page. The front matter is used to configure the settings specific to that page, such as the **title** and **permalink**. Example of front matter below. ``` --- title: This is my title permalink: /this-is-my-page/ --- ``` Specific pages like the [home page](https://app.gitbook.com/configuration/home/overview/) and contact us page have more configuration options, such as the content in the hero banner or the phone numbers displayed. The way the front matter is structured is called [YAML](https://en.wikipedia.org/wiki/YAML). You can think of it as a language used to specify data in a way that can be read and understood by Isomer. Like all languages, YAML has its own 'grammar', known as syntax. Syntax are a list of rules that you have to follow in order for the YAML to be properly understood. There are quite a number of rules in YAML, but we'll just cover what you need to know. **The most important thing in YAML is the spacing.** Certain lines have extra spaces at the front. See this sample extract from a **home page's (index.md file)** front matter: ``` resources: title: Media subtitle: Learn more button: Contact Us ``` In this example, there is a `resources` section. The `title`, `subtitle`, and `button` properties each have 2 spaces at the front. This means that the 3 properties are describing the `resources` section, instead of the whole page. The next thing you should know about YAML are lists. Here's an extract from a dropdown menu in **navigation.yml**: ``` options: - title: Option A url: /page-a/ - title: Option B url: /page-b/ - title: Option C url: /page-c/ ``` A dropdown menu will have multiple options. This is when we need to use a list. Each item in a list is specified by adding a dash (`-`). Note that `url`, which is part of the option together with `title`, must be vertically aligned with `title`. This is more or less what you need to know for YAML. Don't worry if you don't know the specific options to use for each page - you can always refer to the [configuration options](https://app.gitbook.com/configuration/navbar/overview/) for the details. All you need right now is to understand when the extra spaces are needed, and when lists are needed. As a final note, if you have special characters like `#` in your YAML, it is a good idea to wrap the entire text in double quotes, like so: ``` title: "#hashtags" ``` # Config.yml file The config.yml file determines your sitewide configurations (except your footer). This file is located in your main folder {% hint style="info" %} Please ignore the other configurations set in this file that are not mentioned below. They are included by the Isomer team for your site to work properly. {% endhint %} #### Required configuration fields | Field | What it means | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | the name of your site. It can be the name of your agency, name of the microsite, etc | | url | the production URL of your site, e.g. `https://www.abc.gov.sg`. This option is needed for features such as Facebook sharing to work and this will also affect your SEO score on WOGAA or Lighthaus Audit. | | collections | a list of all collections on your site. Refer to the [collection configuration](/configurations/pages/second-and-third-level-navigation-pages) for more details | | resources\_name | the name of your resource room. Refer to the [resource room setup](/configurations/resources) for more details | | favicon | the file path to the favicon that will appear on the browser window. This file must be in the `.ico` file format and it is usually in your /images folder | #### **Optional Fields** | **Field** | What it means | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | shareicon |

the default preview image displayed on social media platforms such as Facebook and WhatsApp if you share a link to a page on your site.

Note: This image option will be overwritten if the page has its own image configuration. If left unspecified, this option defaults to the navigation bar icon. This image should be square, and have a resolution of 600x600 pixels.

| | google\_analytics | your Google Analytics tracking ID. [For more information on setting up GA, you can refer to this page.](/features/analytics-and-seo/google-analytics) | | recommender | set to `true` to enable the automatic page [recommendation system. ](/features/content-recommender)This feature is currently experimental. Defaults to `false`. | | is\_government | set to `false` if you would like to remove the Singapore Government lion masthead at the top of the site. Defaults to `true`. | | future | set to `true` to enable publishing of posts dated in the future. More details can be found in the instructions for [post configuration](/configurations/resources/posts). | Sample configuration (advanced Isomer-specific configuration have been omitted): ``` title: Ministry of ABC url: "https://www.abc.gov.sg" collections: about-us: output: true initiatives: output: true resources_name: "media" favicon: /images/favicon.ico shareicon: /images/shareicon.png google_analytics: UA-139339685-1 ``` # Site color Each Isomer website has two main colors, a primary color and a secondary color. ![](/files/-MJZxSN5iDJ2mWMUn-2s) The **primary** color is displayed in the following elements: * the notifications banner in the homepage * the hero banner button in the homepage * font colors for headers * underlined and highlighted text colors The **secondary** color is displayed in the following elements: * the key highlights buttons in the homepage * the page banner in the inner website pages (all except the homepage) {% hint style="info" %} Note: If you are picking a new primary or secondary color for your Isomer website, please ensure that the color fulfills the minimum color **contrast ratio of 4.5 for accessibility.** Please ensure your color palette provides sufficient contrast using the [color contrast checker](https://webaim.org/resources/contrastchecker/). If you have any questions regarding this, please reach out to us via Slack or email us at {% endhint %} ## How to change your site colors ![](/files/-MJ_-36rL4mvleaQCPWO) The color is set in `misc/custom.scss`. You will find these 3 values in the file: `$primary`, `$secondary`, and `$secondary-hover`. Adjust the [hex codes](https://www.color-hex.com/) for these 3 values accordingly. Note that the semicolon (`;`) is required at the end of each line. Sample configuration: ```css // Website brand colors $primary: #6031b6; $secondary: #4372d6; $secondary-hover: darken(#4372d6, 20%); ``` To change the resource room colors, edit the `$media-color-...` values in the same file (`misc/custom.scss`): ```css // Resources page colors $media-color-one: #49759a; $media-color-two: #744d9f; $media-color-three: #00838f; $media-color-four: #00838f; $media-color-five: #00838f; ``` ## IsomerCMS users If you're using IsomerCMS, your color configuration will be determined on **config.yml** file. # Homepage Your home page is made up of several sections such as the hero banner, informational sections, and a media release section. The full list of section types available are covered in the following pages. Here's a preview of a full list of sections on the homepage. #### Hero Banner (required) {% hint style="warning" %} All sites **must** have a hero banner, all the other sections are optional. {% endhint %} ![](/files/-MKDABOT6GrxlJ4evVgW) **Infobar (optional)** ![](/files/-MKDAS-P8YeTV2ZxJ2p5) **Infopic (optional)** ![](/files/-MKDAWrKXPzFryPQztaA) **Resources (optional)** {% hint style="warning" %} There can **only be 1** resources section on the homepage and the entire site {% endhint %} ![](/files/-MKDAcTWB85_dhs3DBZl) # Basics ![](/files/-MJZpGyoWzoc2VAQjosn) The configuration of the home page all lies in what is known as the front matter (the YAML located between the set of triple dashes `---`). To get started, specify `layout: homepage` to let Isomer be aware that it is a home page instead of a normal page. This is required for the home page to work. The options available are: * `title`: the title of the home page which will be visible in the browser window * `description`: a brief writeup (<20 words) that will appear on social media such as Facebook and WhatsApp when the home page is shared * `permalink`: the URL of the home page. In almost all cases, this value will be `/` * `notification`: a banner that will appear in the hero banner that can display any notification you would like to show users, such as urgent updates. The content here can be written in HTML. *Optional* * `sections`: a list of sections on the home page. Further details on the sections are covered in the next few sections. You can refer to the sample configuration for the specific syntax of the configuration Partial sample configuration (without sections) of a home page: ``` --- layout: homepage title: Ministry of ABC description: The Ministry of ABC is the ministry in charge of XYZ permalink: / notification: Initiative A will be launching soon! Register now sections: # Sections have been omitted, see the following pages for more details --- ``` # Hero Banner ![Screenshot of the hero banner on the homepage with button and 3 key highlights](/files/-MJZoQNPI4fwP9XoJP3u) The hero banner is the main banner on the home page. It includes a background, a call to action button or dropdown, as well as up to 4 key highlights (optional) that you can use to highlight pages and sites of importance. **Background photo** The background photo should only contain scenery, people, or a pattern. It should **not** contain any text as the image will automatically be resized to fit different devices, and text included may end up being cut off or blocked by other components on the page, drastically affecting the user experience on your site. Furthermore, text in images cannot be read by screen readers used by people with visual impairments, affecting the accessibility of your site. The hero banner must be the first section in the page. Only 1 hero banner is allowed on the home page. **Configuration options** * `title`: the title that will be displayed in large font in the middle of the banner * `subtitle`: the subtitle that will be displayed in smaller font in the middle of the banner. *Optional* * `background`: the path to the background image in the hero banner. We recommend a resolution of **1920x720 pixels** * `button`: the text in the central call-to-action button in the hero banner. *Optional* if dropdown menu is present * `url`: the URL linked to by the call-to-action button. *Optional* if dropdown menu is present * `dropdown`: a dropdown menu with sublinks that *replaces* the call-to-action button. *Optional*. The options available for the dropdown menu are: * `title`: the title of the dropdown menu, visible when the menu has not been clicked * `options`: a list of `title` and `url` that form the options under the dropdown menu * `key_highlights`: a list of up to 4 links placed at the bottom of the hero banner that you can use to highlight pages of importance. *Optional*. The options available for each key highlight are: * `title`: the title of the key highlight * `description`: the subtitle/description of the key highlight. *Optional* * `url`: the URL the key highlight links to *Optional* Sample configuration that includes a button without key highlights: ``` - hero: title: Ministry of ABC subtitle: We provide Singaporeans with XYZ services background: /images/banner.png url: /contact-us/ button: Contact ``` Sample configuration that uses a dropdown menu instead of a button, and also includes 3 key highlights: ``` - hero: title: Ministry of ABC subtitle: We provide Singaporeans with XYZ services background: /images/banner.png dropdown: title: I want to... options: - title: Sign up for EFG url: /signup/ - title: Learn more about ABC url: /learn-more/ key_highlights: - title: ABC services description: Find out what ABC can do for you url: /services/ - title: Our Annual Reports url: /annual-reports/ - title: Join ABC description: Unleash your passion and be rewarded with a fulfilling career! url: /careers/ ``` # Infobar ![](/files/-MJZpYfW3ZhN2snbp1hr) The information section, or `infobar`, can be used to provide additional information to users, and also serves as another opportunity to direct users to pages of interest. The infobar does not support images - if you require images, use [`infopic`](https://app.gitbook.com/configuration/home/infopic/) instead. The infobar consists of the following options: * `title`: the title that will be displayed in large font in the infobar * `subtitle`: the subtitle that will be displayed in small font and all caps. *Optional* * `description`: a brief write up you can add to provide the user with more information. *Optional* * `button`: the text on the link that will appear on the bottom on the infobar. *Optional together with `url`* * `url`: the URL the link points to. *Optional together with `button`* Sample configuration for infobar: ``` - infobar: title: Work for the public good subtitle: Careers description: Start a fulfulling and rewarding career with the Ministry of ABC! button: Join Us url: /careers/ ``` ## **Bonus tip!** If you'd like to insert a video on your infobar, you can paste the iframe snipped under the description field**.** **And you will yield a result as seen below.** ![](/files/-MQp_j7a5ncsBkzsFoVX) # Infopic ![](/files/-MJZpjeGYP1oAdAR80Bm) Similar to the infobar, the information section with picture (`infopic`) can be used to provide additional information to users, and also serves as another opportunity to direct users to pages of interest. The photo and text will be placed side by side (horizontally), and the order will alternate with each successive infopic. As the background also alternates between white and a subdued shade of blue, we strongly recommend that the whitespace background, if any, be made transparent instead of white or any other color. The PNG file format supports transparent backgrounds. You may follow [these instructions](https://go.gov.sg/k9m2bc) to edit your image to have a transparent background. The configuration options available are: * `title`: the title that will be displayed in large font in the infobar * `subtitle`: the subtitle that will be displayed in small font and all caps. *Optional* * `description`: a short writeup where you can elaborate a little more about the topic in the section. *Optional* * `button`: the text on the link that will appear on the bottom. *Optional together with `url`* * `url`: the URL the link points to. *Optional together with `button`* * `image`: the path to the image to be displayed in this section. Note that this image is compulsory. If you do not intend to use an image, use the [infobar](/configurations/homepage/infobar) instead * `alt`: a description of what is in the image. Screen readers used by people with visual impairments will read this text aloud, allowing them to understand more fully what is on your site. Hence, to maintain a high standard of accessibility, this field is compulsory Sample configuration of 2 infopics: {% hint style="danger" %} When you copy the configuration below and paste it in index.md (homepage), remember to make sure that it is aligned with the other sections on the homepage! {% endhint %} ``` - infopic: title: Integrity subtitle: Core Values description: Integrity drives everything we do at the Ministry of ABC button: Learn More url: /core-values/ image: /images/integrity.png alt: Members of the Ministry of ABC shaking hands - infopic: title: Professionalism subtitle: Core Values description: We strive to deliver work of the highest calibre button: Learn More url: /core-values/ image: /images/professionalism.png alt: Members of the Ministry of ABC in suits ``` # Resources ![](/files/-MJZqGcLrkUAFBdrwZNd) The resource room is an Isomer functionality that allows you to easily publish posts periodically, such as speeches and media releases. The resource room section will automatically feature the 3 latests posts on the home page. To prevent duplication, the number of resource room sections is limited to a maximum of 1. There will be a link that leads to the full resource room page where all posts can be accessed. The location of this link cannot be changed. The configuration options available are: * `title`: the title of the section, usually the name of your resource room. *Optional* * `subtitle`: the subtitle that will be displayed in small font and all caps above the title. *Optional* * `button`: the text on the link that will lead to the full resource room page. *Optional*, defaults to "MORE" if unspecified Sample configuration of a resource room section: ``` - resources: title: Media subtitle: Learn more button: View More ``` # Sample configuration This is a full sample configuration for a home page, integrating every section that has been covered. You may copy this configuration to your home page as a start, and edit the values accordingly. ``` --- layout: homepage title: Ministry of ABC description: The Ministry of ABC is the ministry in charge of XYZ permalink: / notification: Initiative A will be launching soon! Register now sections: - hero: title: Ministry of ABC subtitle: We provide Singaporeans with XYZ services background: /images/banner.png url: /contact-us/ button: Contact key_highlights: - title: ABC services description: Find out what ABC can do for you url: /services/ - title: Our Annual Reports url: /annual-reports/ - title: Join ABC description: Unleash your passion and be rewarded with a fulfilling career! url: /careers/ - infobar: title: Work for the public good subtitle: Careers description: Start a fulfulling and rewarding career with the Ministry of ABC! button: Join Us url: /careers/ - infopic: title: Integrity subtitle: Core Values description: Integrity drives everything we do at the Ministry of ABC button: Learn More url: /core-values/ image: /images/integrity.png alt: Members of the Ministry of ABC shaking hands - infopic: title: Professionalism subtitle: Core Values description: We strive to deliver work of the highest calibre button: Learn More url: /core-values/ image: /images/professionalism.png alt: Members of the Ministry of ABC in suits - resources: title: Media subtitle: Learn more button: View More --- ``` The above configuration will produce a home page similar to the following:
# Pages ![](/files/-MJZtiOzELbUyZDXnDal) Pages are the meat of your site. It is where you can talk about your agency and your work in detail, post media releases, and so on. The content of pages are written in Markdown which comes after the front matter. Isomer pages generally come in 3 different formats: simple first level pages, second and third level pages (such as this page), and resource room posts. With Isomer V2, all 3 formats have been consolidated into a single layout, with Isomer automatically displaying and hiding the relevant components on your content page. Hence, there is no longer a need to specify the layout for these 3 formats as Isomer V2 has been configured to use this consolidated layout by default. # Configuration ![](/files/-MJZtrenjwvJfKi1WbKV) The configuration for each page is located in the front matter, and the available configuration options are: * `title`: the title of the page which will be visible in the browser window * `permalink`: the path to the page, e.g. `/category/title/`. Except for slashes denoting a category, the permalink should be alphanumeric (consisting only of letters, numbers, and dashes). No special characters such as `?` or `%` should be used. For aesthetic reasons, we further recommend that you avoid the use of capital letters * `image`: an image that will be featured by social media platforms such as Facebook and WhatsApp if a user shares a link to the page. *Optional* * `description`: a short write up that will be featured by social media platforms such as Facebook and WhatsApp if a user shares a link to the page. *Optional*, defaults to the first 20 words on the page if omitted * `recommender`: if your site has the automatic recommender system enabled, you can set this value to `false` if you do not want automated recommendations to appear on this page. Defaults to `true` if unspecified. *Optional* * `breadcrumb`: the text on the breadcrumb link representing this page. *Optional*, defaults to the first 7 words in the title if left unspecified. All breadcrumb links will appear in all caps * `published`: you can set this value to `false` to hide the page from the generated site. Defaults to `true` if left unspecified. *Optional* For the vast majority of pages, you will only need to set two configuration options, `title` and `permalink`. Posts and pages with a left navigation bar have their own additional configuration options. See their page in this section for more details. Sample configuration: ``` --- title: Join Us permalink: /careers/join-us/ --- ``` # Second and Third Level Navigation Pages Often, you will have a series of pages that fall under a common subcategory. Leftnav pages all fall under what is known as a [collection](https://jekyllrb.com/docs/collections/). Think of a collection as essentially a folder for your pages. The folder name must begin with an underscore (`_`), followed by the collection name. The collection name will appear in the breadcrumbs on your leftnav page, with dashes (`-`) and underscores (`_`) in the collection name replaced by spaces. Just like all breadcrumbs on Isomer, they will appear in all caps. {% hint style="danger" %} Do not put spaces in file names or folder names. Always replace the spaces with dash (-). Similar to permalinks, a collection name should only consist of lower case letters, numbers, and dashes. {% endhint %} If you have given us a sitemap, this structure and configuration should have been configured for you. If not, you can create a new collection by creating the collection folder, then adding the following configuration in `_config.yml`: ``` collections: collection-name: output: true ``` If you have multiple collections in your site, the section in `_config.yml` should look something like this: ``` collections: collection-one: output: true collection-two: output: true collection-three: output: true ``` Once the folder and configuration has been done, you can create and configure pages in the collection just like normal pages! The items in the second level navigation bar on the left will be added automatically as you create new pages. For the second level navigation to appear on the main navigation bar at the top of the page, refer to the [navigation bar configuration](/configurations/navigation-bar). The pages will appear in alphabetical order based on their Markdown file names. Hence, the file name of each Markdown file in a collection should be prefixed with a number such as `1-` for the first page in the collection, `2-` for the second page, and so on. If there are 10 or more items in the second level navigation, add a zero in front of the single digit numbers (i.e. `01-`, `02-`, ..., `10-`, `11-`, ...) ![](/files/-MJZuJvgjEZ-Wst9p4pn) Isomer also supports third level pages. To create a third level page, create a Markdown file just as you would for a second level page, but with the file name prefixed with a number and a letter. For example, if the third level navigation is fifth in the second level navigation, and the page is first in the third level navigation, the prefix should be `5a-`. Once the file has been created, configure the page's front matter just as you would for a normal or second level page, but with an additional option: `third_nav_title`. This title is the header that will appear on the second level navigation as well as the breadcrumbs. The result is that when the file names are sorted alphabetically, third level pages with the same `third_nav_title` must run consecutively. Any breaks in the middle will result in breaks in the second level navigation. Sample configuration of a third level page with file name `5a-initiative-a-overview`: ``` --- title: Overview permalink: /initiatives/initiative-a/overview/ third_nav_title: Initiative A --- ``` # Navigation Bar ![Navigation bar](/files/-MJZs9HHuthF0syBkgGk) The navigation bar is the main menu that guides your site's visitors to the information they are looking for. Hence, it is important for your site to be structured logically, so that users can reach the information as quickly and easily as possible. Group similar pages under a common category using Isomer's second level navigation feature as far as possible. If sub-categories are appropriate, such as in the case of sub-topics, you can use Isomer's third level navigation feature. In the process, avoid: 1. **Creating too many top level items in the navigation bar.** When too many items are added, the items may "overflow" to the right. Items that "overflow" may extend beyond the edge of narrow screens such as iPads, causing them to either become invisible or partially visible, drastically affecting the user experience on your site. Consider grouping similar pages and categories under new categories and sub-categories to reduce the number of top-level items. Furthermore, keep the title of top level items succinct (within 2 words). Less is more! 2. **Creating too many external links in the navigation bar.** While external links (which are links to another site, which may or may not be owned by your agency) has its purpose, overuse can create unnecessary clutter on the navigation bar. Consider if it is more appropriate to place them as hyperlinks within a page itself. # Configuration ![](/files/-MJZsPCAZx_wuhC2p9iD) The navigation bar configuration file is `_data/navigation.yml` and has 2 elements to configure, `logo` and `links`: * `logo`: the path to the logo that will be located at the left of the navigation bar, e.g. `/images/logo.svg`. The logo size is adjusted dynamically by the user's browser, but we recommend a logo resolution of 170x50 pixels. * `links`: a list of items in the navigation bar. Each item requires a `title`, which is the label that is visible to users on the navigation bar. The URL of each item can be specified in one of four ways: * For items that consists only of pages in a [collection](https://app.gitbook.com/configuration/pages/leftnav/), you can use `collection`, specifying the collection name. The subitems and URLs will be automatically generated by Isomer. * For a [resource room](https://app.gitbook.com/configuration/resources/overview/), you can specify `resource_room: true`. The links to the resource room and categories will be automatically generated by Isomer. * For a single link without subitems, simply specify the `url`, e.g. `/category/page/` or `https://www.google.com`. Remember to include the `https://` or `http://` in front of the URL if the link is to another site/microsite. * For an item with custom subitems, specify the `url` which will be the URL the user is brought to if they click on the link on the navigation bar directly. On top of that, specify `sublinks`, and provide a list of sublinks following the third format above. Sample configuration of a navigation bar in `_data/navigation.yml`: ```yaml logo: /images/logo.svg links: - title: Sample Collection collection: sample-collection - title: Resource Room resource_room: true - title: Single Page url: /some-page/ - title: Custom Sublinks url: /some-page-a/ sublinks: - title: Subitem 1 url: /some-page-a/ - title: Subitem 2 url: /some-page-b/ - title: External Subitem 3 url: https://www.site.com/url/to/page/ ``` # Resources ![](/files/-MJZv3y22V8sbnvuETZe) Many government sites include a section where posts, media releases, speeches, and the like are released from time to time. Isomer provides support for a special type of collection for such uses called the resource room. The resource room supports multiple categories. You can utilise this feature to separate different types of posts, such as blog posts, annual reports, and media releases. We strongly encourage you to carefully assess the type of posts your agency releases beforehand in order to come up with the most appropriate categories, so as to avoid folder restructuring down the line which may prove to be time consuming. Posts are automatically sorted by date, with the latest posts displayed first. In addition, there is a dropdown menu in the top right which allows the user to filter posts by year. Resource room posts can also be used for file downloads, using the `file_url` option. # Setup If you have provided us with a sitemap, the setup of the resource room and its categories would have been completed for you. However, if you would like to create new categories or edit/rename existing ones, then you should refer to the following instructions. To create a resource room, first create a folder (without a preceding underscore in the folder name) that will contain the whole of your resource room. Within that folder, create the file `index.html`, and add the following content: ``` --- layout: resources title: Your Resource Room Name Here --- ``` Head to `_config.yml`, and set the configuration option `resources_name` to the resource room folder name. For each resource room category, create a folder inside the resource room folder with the category name, with dashes (`-`) replacing spaces in the folder name just like permalinks. Within this folder, 1. Create a new copy of `index.html` with the following content: ``` --- layout: resources-alt title: Your Category Name Here --- ``` 2. Create a new folder named `_posts` If you would like a resource room section to appear on the home page, follow [these instructions](/configurations/homepage/resources). For the navigation bar setup, refer to [these instructions](/configurations/navigation-bar/navigation-bar-configuration). Your resource room setup is now complete and you're ready to start writing posts for your resource room! The category will be visible and functional once you have at least one post in the category. At this stage, your directory structure for the resource room should look something like this: ``` . └── media ├── category-a | ├── _posts | └── index.html ├── category-b | ├── _posts | └── index.html ├── category-c | ├── _posts | └── index.html └── index.html ``` # Posts ![](/files/-MJZvc6_p27hNTKdYjVf) To create a new resource room post, create a markdown file in the `_posts` folder of the category the post falls under. The file name must be prefixed with the post's publishing date in YYYY-MM-DD format, e.g. `2019-02-28-press-release-by-minister.md`. This file name convention will be[ different if you've been migrated to a CMS friendly version of v2](/configurations/resources/cms-compatible-sites). We will let you know to take note of this if this is the case. Posts dated in the future will not be published. Note that posts dated in the future will not automatically be published on the date either - they will only be published together with another edit on or after that date. To publish all posts, including those dated in the future, set `future: true` in `_config.yml`. {% hint style="danger" %} Do not put spaces in the filename. Always replace the spaces with dash (-) {% endhint %} The configuration options available for posts are: * `title`: the title of the post which will be visible in the browser window * `permalink`: the path to the post, e.g. `/resource-room/category/title/`. Except for slashes denoting a category, the permalink should be alphanumeric (consisting only of letters, numbers, and dashes). No special characters such as `?` or `%` should be used. For aesthetic reasons, we further recommend that you avoid the use of capital letters. *Omit* this field if `file_url` is specified * `file_url`: the path to the file to be downloaded, for downloadable posts, e.g. `/downloads/form.pdf`. Once this field is specified, the file download will begin immediately once the user clicks on the post in the resource room menu. *Omit* this field if `permalink` is specified * `image`: an image that will be featured by social media platforms such as Facebook and WhatsApp if a user shares a link to the page. *Optional* * `description`: a short write up that will be featured by social media platforms such as Facebook and WhatsApp if a user shares a link to the page. *Optional*, defaults to the first 20 words on the page if omitted * `recommender`: if your site has the automatic recommender system enabled, you can set this value to `false` if you do not want automated recommendations to appear on this page. Defaults to `true` if unspecified. *Optional* * `breadcrumb`: the text on the breadcrumb link representing this page. *Optional*, defaults to the first 7 words in the title if left unspecified. All breadcrumb links will appear in all caps * `published`: you can set this value to `false` to hide the page from the generated site. Defaults to `true` if left unspecified. *Optional* Sample configuration of a post: ``` --- title: Your Title Here permalink: /resource-room/category/title/ image: /images/title-image.jpg description: The Ministry of ABC will be launching Initiative A to help Singaporeans... --- ``` # Resources with v2 migration If your site has been migrated to v2 and has been informed of the resources change, do note the following change if you'd like to create new resource pages on Github. If your site has been migrated to v2 and you have been informed of the resource change, you will also have to change the way your name your resources pages. {% hint style="danger" %} **This is only applicable to users with resource migration** {% endhint %} **How it looks like on regular v2 site:** {YYYY-MM-DD}-{title}.md ``` 2020-12-29-countdown.md ``` **How it looks like on CMS v2 site**: {YYYY-MM-DD}-{category type}-{title}.md ``` Some examples below: 2020-12-29-file-safe-distancing-guide.md 2020-12-29-post-safe-distancing-guide.md ``` ### Category type can be either **file or post** **file** - if this resource post is a downloadable post (when user click on the tile, they will either download the $$a = b$$ file or open a new tab in browser to view the pdf file), see example below on hlb.gov.sg website. ![](/files/-MTAPOjOiY3iu8QTZJlf) **post -** when a user click on the resource tile, they will be led to a post like what you see below ![](/files/-MTAPfcD2pCeWvCc_E7s) # Contact Us The contact us page is an easy way for you to publicise your agency's addresses and points of contacts. Isomer provides a `contact_us` layout for this purpose. Note that contact us pages cannot be posts, nor will they have a second or third level navigation bar even if part of a second level collection. In other words, contact us pages should only be simple pages in the first level of your site's navigation. ![](/files/-MJZvrs7xND4YpgXle4O) # Configuration The configuration options available are: * `layout`: this option must be set to `contact_us` * `title`: the title of the page which will be visible in the browser window * `permalink`: the path to the page, e.g. `/contact-us/`. Except for slashes denoting a category, the permalink should be alphanumeric (consisting only of letters, numbers, and dashes). No special characters such as `?` or `%` should be used. For aesthetic reasons, we further recommend that you avoid the use of capital letters * `agency_name`: the text that will appear after "Get in touch with". Defaults to the `title` in `_config.yml` if left unspecified. *Optional* * `locations`: a list of addresses to be displayed. *Optional*. Each location supports the following configuration options: * `title`: the title or name of this location, e.g. "HQ" * `address`: the address of the location. See the sample configuration below for an example of a multi-line address * `maps_link`: a link to the address on an online map service such as Google Maps or OneMap. If left unspecified, a Google Maps link will be automatically generated from the address. *Optional* * `operating_hours`: a list of `days`, `time`, and `description` of the location's operating hours. *Optional* * `contacts`: a list of contact details to be displayed. *Optional*. Each contact supports the following configuration options: * `title`: the title or name of this contact, e.g. "General Enquiries" * `content`: a list of `phone`, `email`, or `other` contacts under this title Sample configuration of a contact us page: ``` --- layout: contact_us title: Contact Us permalink: /contact-us/ agency_name: Ministry of ABC locations: - title: Main Office address: - 31 Sesame Street - Big Bird Building - Singapore 123456 operating_hours: - days: Mon - Fri time: 8.30am - 6.00pm description: Closed on Public Holidays - days: Sat time: 8.30am - 12.00pm - title: Branch Office address: - 109 North Bridge Road - Singapore 179097 maps_link: https://goo.gl/maps/C8VfxphGxT2GsfcaA contacts: - title: General Enquiries & Feedback content: - phone: +65 6123 4567 - email: enquiries@abc.gov.sg - other: Any text here including HTML - title: Careers content: - email: careers@abc.gov.sg --- ``` ![](/files/-MJZwTOd88Ww0aSPZSCo) # Footer ![Sample footer](/files/-MJZtLZaYrduTcUmgElx) The footer is a "bottom navigation bar" to wrap up a page on your site. It gives your site's visitors another opportunity to find the page with the information they are looking for, or to send them to another page they may be interested in. The footer also contains certain links and information such as the privacy statement, copyright agency, report vulnerability link and last updated date. ![](/files/-MJZtX8m_FMbNWRpouK1) The footer configuration file is located at `_data/footer.yml` and consists of the following configuration options. Some are required, some are not. Required fields: * `feedback`: the URL to the feedback form for the site. The [Digital Service Standards](https://www.tech.gov.sg/digital-service-standards/) requires all web-based digital services and mobile applications to provide a mean for users to provide feedback. We strongly recommend you create a feedback form using [FormSG](https://v2.isomer.gov.sg/configurations/www.form.gov.sg) * `privacy_policy`: the URL to your site's privacy statement. The privacy policy URL defaults to `/privacy/` if left unspecified. We strongly recommend you prepare a privacy statement prior to site launch. Your agency's legal department should be able to provide you with the necessary assistance * `terms_of_use`: the URL to your site's terms of use. This URL defaults to `/terms-of-use/` if left unspecified. We strongly recommend you prepare the terms of use prior to site launch. Your agency's legal department should be able to provide you with the necessary assistance. Optional fields: * `contact_us`: the URL to the page with your agency's contact information. *Optional* * `show_reach`: set this value to `true` to show a link to [REACH](https://www.reach.gov.sg/). *Optional* * `faq`: the URL to your site's frequently asked questions page. *Optional* * `copyright_agency`: the name of the agency to be displayed in the copyright notice on the bottom right of the footer. *Optional*, defaults to your site title in `_config.yml` if left unspecified * `social_media`: a list of links to your agency's social media profiles. *Optional*. The supported social media platforms are: * `facebook` * `twitter` * `youtube` * `instagram` * `linkedin` * `navlinks`: a list of links to be displayed in the footer, in the same format as that of the [navigation bar](https://app.gitbook.com/configuration/navbar/configuration/). *Optional*, defaults to the same list as the navigation bar if left unspecified. This option should only be used if there are links you do not wish to include in the footer, or additional links you want to include in the footer but not in the navigation bar. Note that links with titles "FAQ" or "Contact Us" are automatically removed as their links are placed separately in the footer (see above). * `links`: a list of up to 2 additional custom links to be displayed in the bottom right of the footer, together with `contact_us`, etc. Takes a `title` and `url` for each link. *Optional* Sample configuration of a footer in `_data/footer.yml`: ```yaml contact_us: /contact-us/ show_reach: true feedback: https://form.gov.sg/#!/5a9ce876b3a3b6006e6b8335 faq: /faq/ privacy_policy: /privacy-policy/ terms_of_use: /terms-of-use/ copyright_agency: Open Government Products social_media: facebook: https://www.facebook.com/YourFBPage twitter: https://www.twitter.com/YourTwitter youtube: https://www.youtube.com/YourYoutube instagram: https://www.instagram.com/your.insta/ linkedin: https://www.linkedin.com/company/YourAgency # If navlinks are the same as your navigation bar, you can omit this section entirely! navlinks: - title: Sample Collection collection: sample-collection - title: Resource Room resource_room: true - title: Single Page url: /some-page/ - title: Custom Sublinks url: /some-page-a/ sublinks: - title: Subitem 1 url: /some-page-a/ - title: Subitem 2 url: /some-page-b/ - title: Subitem 3 url: /some-page-c/ links: - title: Google url: https://www.google.com ``` # Analytics and tracking #### You've gotten your site up, what's next? You may have questions like these: * How many people visit my website? * Which pages on my website are the most popular? * What content do my visitors like the most? To give you a better understanding of how your visitors are viewing your site, you need to set up analytics on your site. Here are analytics tools you could use on your isomer sites. * [WOGAA](/features/analytics-and-seo/wogaa) * [Google Analytics](/features/analytics-and-seo/google-analytics) * [Facebook Pixel](/features/analytics-and-seo/facebook-pixel) # WOGAA Whole of Government Analytics WOGAA (Whole of Government Application Analytics) is a centralised, internet-facing government platform to analyse and improve digital services. WOGAA tracking has already been integrated into Isomer with no additional implementation required. What you need to do next is to register your digital service (website) on WOGAA platform. ### Register your Digital Service (website) Ensure you have [signed up for a WOGAA account.](https://wogaa.sg/signup) ![WOGAA Homepage](/files/-MlKI3QKhQ9BZpHd2ECK) Once logged in, navigate to **Manage Service** and click on the **Add Service** button on the top right-hand corner to get started. ![Manage Services](/files/-MlIeiDVN5KUKodzFl5b) Click on **Informational Service (Website/e-Services Portal)** to register your Isomer Website. ![Add Digital Service](/files/-MlIf2ezZR4bRFZq6692) Read and follow the instruction on screen to complete the registration of your Informational Service. Note: You are encouraged to have registered your new system with Digital Governance Platform beforehand. However, you may still proceed with adding your Informational Service (IS) on WOGAA and add the ICT System information at a later date. ![Add Informational Service](/files/-MlIgTuRvwaXKETFjjuW) Upon successful registration of the informational service, you will be able to see the entry reflected under Manage Service with a Blue Tick. ![](/files/-MlIgz9YEsS6sSYXHKDT) **Setting up Sentiments** Sentiments is a tool for you to quickly gather feedback about your site from your visitors. To set up sentiments, go to **Manage Services** on your WOGAA portal and select **Manage Sentiments**. Follow the step-by-step guide on the portal, you should be able to set it up with a quick toggle of a button. ![Manage Sentiments](/files/-MlIhMHvOXQqrtnNSeZX) Click on the toggle under Status to enable sentiments on your website. Additionally, you may customise the look and position of the widget inside **Configure** as well. ![Toggle Sentiments](/files/-MlIhmjEi0rD27hGcOOM) {% hint style="info" %} If you have any questions regarding WOGAA and how it works, you may search for your query under the WOGAA [FAQ](https://wogaa.sg/faq). Otherwise, you may also reach out to the WOGAA team at [support@wogaa.gov.sg](mailto:%20support@wogaa.gov.sg). {% endhint %} # Google Analytics Google Analytics is an free analytics tools provided by Google. You can go [here](https://accounts.google.com/) to sign up using your google account. Next, follow the steps below to configure Google Analytics on your site: **Step 1** Go to your admin page, and under **Tracking Info**, select **Tracking Code** ![](/files/-MJ_0WLLTAe0ScdH1cfw) **Step 2.** Copy the **Tracking ID** on your Google Analytics ![](/files/-MJ_0uLm7Dj00KIGrAC9) **Step 3**. Paste it on your **config.yml** file in your repository. You should create a field `google_analytics:` if the file does not have this. ![](/files/-MJ_17Ua3Oci-VEE6Kgx) # Facebook Pixel The Facebook Pixel collects data that helps you track conversions from Facebook ads, optimize ads, build targeted audiences for future ads, and remarket to people who have already taken some kind of action on your website. You can refer to their instructions [here](https://www.facebook.com/business/help/952192354843755?id=1205376682832142) You should not copy the code block that is provided by Facebook, but instead copy the Facebook Pixel ID that is provided and paste it within the `config.yml` file in the following format: ``` facebook-pixel: ``` {% hint style="danger" %} We currently do not support **Google Tag Manager** as it requires the team to loosen our security policy {% endhint %} # LinkedIn Insights LinkedIn Insight Tag works similarly as Facebook Pixel. Simply insert the following field into your config.yml file and input your Insight tag id. You can read more about finding your linkedin partner id here on this page: ``` linkedin-insights : ``` {% hint style="danger" %} We currently do not support **Google Tag Manager** as it requires the team to loosen our security policy {% endhint %} # IsomerSSL IsomerSSL provisions SSL certificates for your sites. The certificates are issued by Let's Encrypt, a non-profit certificate authority run by Internet Security Research Group that provides X.509 certificates for Transport Layer Security encryption at no charge. You can read more about them [here](https://letsencrypt.org/). The certs are provisioned through CertBot, which is integrated into Isomer's redirection server. To use this IsomerSSL, all you need to do is to point your A-record to our redirection server and we'll provision a cert for you. Certificate renewal typically happens every 3 months and it will be handled by Isomer team centrally. {% hint style="info" %} **Wondering how our redirection service works?** You can read more here: {% endhint %} # Content Recommender Isomer's recommender engine helps you to recommend similar content on every page that a user visits. We analyse the content on your page and recommend the top 5 most similar content which can be found on your site. You can see an example of recommender implemented on a page on Govtech's website [here](https://www.tech.gov.sg/media/technews/drones-that-keep-singapore-going). ![Sample of Recommender at the bottom of a page](/files/-MO0Uno1S_mSi34mA4hn) {% hint style="info" %} The content recommender engine will help your site visitor **discover similar content** on your site and it could also **boost the traffic** on all your other pages. {% endhint %} If you'd like to have recommender implemented on your site, please contact the Isomer team to do so. # Overview On GitHub, we keep 2 separate copies of each site on 2 separate "branches" - `staging` and `master`. You might also remember that you were asked to make sure that you are in the `staging` branch of the repository. Isomer sites will always have at least 2 branches - `staging` and `master`. The `staging` branch is where you can make edits freely without affecting your live site. Your changes can be previewed on the staging URL, which is also separate from your live site. When you're happy with your changes and want to push them to your live site, open a pull request to the `master` branch. The staging branch is where you do your editing and preview your edits. Once you're ready for your edits to go live, you'll need to "copy" the staging branch to the master branch. This is done using what is known as a pull request. To publish a page, you have to follow the steps 1. [Creating a pull request](/publish-your-changes/creating-a-pull-request) 2. [Approve a pull request](/publish-your-changes/approve-a-pull-request) 3. [Merge in the changes](/publish-your-changes/merge-a-pull-request) Proceed to the next page to find out how to create a pull request. # Creating a pull request A **pull request** is essentially a request to update the content of the `master` branch to be in sync with the `staging` branch. To prevent defacement or other security incidents, we have instituted a policy where your pull request must be approved by at least 1 other user. You can follow the steps below to create a pull request. **Step 1.** Go to the Pull Request tab, click on **New Pull Request** ![](/files/-MJUwLVorphnOHJgelA0) **Step 2.** Select base as master. ![](/files/-MJUxBvpHoIl8-cj1Wq0) **Step 3.** Select your department Reviewers. This is located at the right side of the page. Remember to fill in the title of the pull request and description (if needed). ![](/files/-MJUxHNOBmtZ1urwqIhf) **Step 4.** Click on "Create pull request" button Once you're done creating the pull request, you should alert your colleague or send him the link to the pull request page of the pull request for easy reference. {% hint style="warning" %} **Pull requests takes in all the differences between your live and staging sites**. Hence, you are not able to selectively choose what you'd like to publish. If you'd like to prepare your content in advance, we suggest that you keep it outside of Github. {% endhint %} # Approve a pull request Before any pages can go live, it has to be approved first by a second pair of eyes. This could be your colleague or your boss. The approval process ensures that changes are reviewed and makes it harder for attackers to deface your website or make unauthorised changes easily. {% hint style="info" %} Before you approve the pull request, be sure to check the staging site that all changes are reflected correctly to confirm that your content is ready to be published {% endhint %} To approve a pull request, follow the steps below **Step 1.** Go to the pull request tab and select the correct pull request ![](/files/-MJV-GeeS9hRaklIdjmZ) **Step 2.** Select *add your review* button ![](/files/-MJV-dSP_Y9D1eCK2hNX) **Step 3.** Add you review and select *approve* and click on *submit review* ![](/files/-MJV-w5Fn_kecfywgLWh) # Merge a pull request Merging a pull request publishes your content to your live site {% hint style="info" %} Once your pull request is approved, anyone who has access to the site, can publish your content to live. {% endhint %} You could leave this step to the next day if you wish to publish your content at a certain time and day. All you have to do is to log into Github at the time you wish to publish and go through the steps below **Step 1.** Go to the pull request that has been approved (you can follow the same steps by going to Pull request tab, and select the correct pull request in the list) **Step 2.** Scroll to the bottom of the page and you'll see the green button that says**,** *Merge Pull Request* and click on it. ![](/files/-MJV1HV2_9UnKoBlK-SR) **Step 3.** You will be prompted another button to *Confirm Merge*. Click on it, and voila! Your site is live now! ![](/files/-MJV1m0nVyNzRjyEcIoE) {% hint style="warning" %} Note that depending on the size of your size and the isomer user traffic, the time taken to live may vary from 1 - 15 mins. {% endhint %} Once you've merged the pull request, your changes will be reflected on your live site. **If your site is not launched yet, proceed to the next page to find out what to do next.** # Site Launch Ready to launch your site? Let us know in advance (**ideally 2 weeks**) prior to when you’d like to launch the site. {% hint style="info" %} If you need the site to be up urgently, let us know when we’re onboarding you onto isomer or as soon as possible. {% endhint %} Before you proceed, there are a few important things you should note. ## Get ready an SSL certificate Sites are typically launched along with SSL certificate. [Read more about what it is here](https://www.globalsign.com/en-sg/ssl-information-center/what-is-an-ssl-certificate). On Isomer, are two different kinds of SSL cert you can choose from. 1. LetsEncrypt SSL cert, it is free and renews automatically which allows agencies to have an easier time setting up for site launch. 2. Custom SSL cert. You have to purchase on your own separately. Do note that this method requires yearly renewal of SSL cert and you will have to pay for this. ## Install your SSL cert on isomer's CDN The different types of certs will require different steps of installation. This step can only be done by the isomer team. ### Site launch with LetsEncrypt SSL cert Isomer is now able to support the provisioning of SSL certs for free that renew automatically and managed by the team. These are issued by [Let's Encrypt](https://letsencrypt.org/), a non-profit certificate authority, through two avenues: 1. [KeyCDN](https://www.keycdn.com/), for domains such as "[www.example.gov.sg](http://www.example.gov.sg)" and; 2. [Certbot](https://certbot.eff.org/about/), a free and open-source helper application that automatically obtains and installs certificates into NGINX for "example.gov.sg" We highly recommend newly onboarded agency sites to make use of the service. If you wish to have your site launch with LetsEncrypt SSL cert, please reach out to us and we'll share a form with you for site launch. {% hint style="success" %} Once you have filled up the form, your site will go live within the **next 30 min - 1 hour**. Only submit the form when your site is ready to go live. {% endhint %} If not, you may refer to the next section with instructions on how to launch your site with a custom SSL cert. {% hint style="danger" %} **Please remove any IPv6 records as it will interfere with the provisioning of certs.** {% endhint %} ### Site launch with custom SSL cert *Before you purchase your own custom SSL cert, please make sure that you have obtained CSR (Certificate Signing Request) from the Isomer team.* **Step 1.** We’ll generate a CSR for your to purchase your own SSL cert and provide your CNAME and A-record for you to update your DNS records on the domain you’ve purchased. **Step 2.** Send us your SSL cert and we’ll install it on our CDN. ## Set up your DNS (Domain Name System) records Your site should have a domain (a.k.a URL). To configure your isomer site to point to your domain, you need to log into ITSM to make the DNS record changes. [Read more on how to make these changes on ITSM.](/publish-your-changes/site-launch/how-to-make-records-changes-on-itsm) Make sure that you have these two records set up on your DNS. | Domain type | Type | Details | | ------------------------------------------------------- | -------- | ----------------------------------------------------------------------------- | | www (e.g [www.agency.gov.sg](http://www.agency.gov.sg)) | CNAME | Points to a URL that isomer team provides upon request | | root (e.g agency.gov.sg) | A-record | Points to a redirection server IP address, which we will provide upon request | Our redirection server redirects all of the non-HTTP traffic to HTTPS traffic, and all the non-www traffic to [www](http://www). To see this in effect, try typing into the address bar and you will notice that it gets redirected immediately. {% hint style="danger" %} Once your DNS is configured and SSL cert installed, your site will be live anytime. **You should schedule a time with the isomer team to do this.** {% endhint %} ## **Are you an Isomer site switching from Custom to Let's Encrypt Cert?** {% hint style="danger" %} **There will be 1 - 1.5hr downtime during the switch.** {% endhint %} *As this service is provided at no cost to all agencies, we appreciate your understanding that this switch can only be performed **during work hours** so that the team could be on standby in cases of incidents.* # How to make records changes on ITSM? ITSM is IT Service Management portal for the WOG, this is where your domains (the URLs of your website is managed). Typically only your IT Department has access to ITSM. If you have access to ITSM but still not sure how it works, you can refer to this quick guide on making A and CNAME records changes. To access ITSM, you go to {% hint style="danger" %} **You can only access ITSM on GSIB laptops.** {% endhint %} #### **Step 1** - Go to your ITSM (IT Service Management) portal, select ![](/files/-MRcUkyTjjaDxCgZ8aII) #### **Step 2** - Click on External and you'll see a list of domains you own. ![](/files/-MRcV2OrRywjJz7N22xr) #### **Step 3** - Click on the domain of your site that you're migrating. You will see a list of records of your domain. ![](/files/-MRcVZZYjcCMrVcSVkbj) #### Step 4 - To amend your A - Record, select the tab that says "A". You will see where the A record is pointing to. ![](/files/-MRcVy0LrzAiZHfmWJmm) **Step 5 - Look for the A-record which was pointing to the IP address that the previous service hosting your website and click Modify (the orange button)** *To find out where your website is previously pointing to, you can go to* [*Google's Dig ToolBox*](https://toolbox.googleapps.com/apps/dig/#A/)*.* #### Step 6 - Change the entry record to the IP address given by Isomer team. and make sure that TTL is set to 5 mins. If your TTL is longer, the swing in records will take longer. **Click Modify A Record when you're done** ![](/files/-MRcXidMrIJY0qe8Rupd) #### How to change the CNAME record? {% hint style="info" %} To change your CNAME record, follow the same step but instead of "A", select the "CNAME" tab. {% endhint %} # Frequently Asked Questions (FAQ) The FAQ section is split up into multiple sections for easy reference. 1. General 2. Security 3. Pull Requests 4. Digital KPI 5. Migration from v1 to v2 If you have questions that have not been addressed, please reach out to the Isomer team. # General This FAQ section covers only information relating to formatting your content or your site after you're onboarded. {% hint style="info" %} For policy, compliance (IM8), cost, and other questions prior to onboarding to Isomer, please refer to our [Official Website](https://www.isomer.gov.sg) FAQ. {% endhint %} ## Can I schedule my changes to be published at a specific date/time? Isomer does not support embargoing or scheduling of content to be published. However, what you could do is to prepare the content in advance, create a pull request and have it approved, and you can leave the last step of publishing ([merging pull request](/publish-your-changes/merge-a-pull-request)) to the time you intend to publish your changes. You can simply log into your Github account on any internet device to publish it. ## I heard of Isomer's free SSL cert service. How do I start using it? Yes, we've launched free SSL cert provisioning service as of 14 October 2020 called IsomerSSL. If your agency is open to explore this option, do let us know by dropping us an email or an enquiry [here](https://form.gov.sg/#!/5dc80f7c03b2790012428dc5). ## How much does an SSL cert cost? It depends on what SSL cert provider and the type of cert that you purchasing, it could range from $200 to $1000 a year. {% hint style="info" %} With the recent release of free SSL cert provisioning tool on Isomer, agency can now opt to use free SSL cert issued by [Let's Encrypt](https://letsencrypt.org/). Certs are renewed automatically every 3 months. {% endhint %} ## Does Isomer support Google Tag Manager (GTM)? Unfortunately no. The reason is because the use of GTM violates the Content Security Policy (CSP) we've set up to protect your site from SQL Injection or XXS attacks. However, you can explore the use of Facebook Pixel, find our more [here](/features/analytics-and-seo/facebook-pixel). ## Am I on Isomer v1 or v2? If your site is onboarded before mid 2019, you're likely on v1 of isomer. To confirm this, you can check where your homepage is housed and edited. If your homepage is edited on `homepage.yml` file, you're on v1. If you're editing your homepage on `index.md` file, you're on v2. ## Can I use WOGAA or AskJamie on Isomer sites? Yes, you can integrate WOGAA and AskJamie on Isomer sites. For WOGAA, you can refer to [our guide on setting up analytics](/features/analytics-and-seo#youve-gotten-your-site-up-whats-next). For AskJamie, drop us an email, share your AskJamie code snippet and we'll configure it for you. ## Can I change the font size or type? No, Isomer provides ready-to-use template which has gone through rigorous UI and UX tests to ensure accessibility for all types of audiences, and hence you're unable to change the font type and sizes. ## How do I verify my service on WOGAA? After registering your site on WOGAA, you might have seen a status saying "Pending Implementation and Verification". This is because you have yet to inform WOGAA that your site is hosted on Isomer and does not require code verification. [Read more on the detailed instructions here.](/features/analytics-and-seo/wogaa#verification) WOGAA team will then manually toggle your WOGAA active on their end once they're are infoormed. ## How do I back up my site for archiving purposes? To keep a copy of your site content offline, you can download it in a zip file. To do so, follow the steps below **Go to your repository, usually with the URL github.com/isomerpages/agency-site** 1. Click on the Code button 2. Select Download Zip option ![](/files/-MT-iKs8Utf8Kwg898Bd) ## Why no carousels? This is because carousels are statistically proven to be not effective in conversion. A study was conducted and found that click-through rate reduced significantly after the first image. [You can read more about it in this article. ](https://medium.com/@sherpadesignco/carousels-are-killing-your-conversion-rate-heres-how-to-fix-that-b57e31f8f508) # Security We understand security is important to you, hence, we've dedicated this section specifically for your security related questions ## How does Isomer handle website defacement? While Isomer does not offer website defacement monitoring, we do implement a series of checks and layers of security to minimize the possibility of defacement: In order to successfully publish content on isomer, you have to: 1. Gain access to the site repository on Github 2. This means either, through an existing account of a user on isomer or getting unauthorised access to the site repository * Getting unauthorised access to the site is close to impossible as granting access to the site requires Isomer team's manual intervention and agency's administrator approval * To gain access to a existing Github account of a user on isomer, you have to **figure out the password combination** (Github enforces that user has implemented passwords that are either eight characters long, if it includes a number and a lowercase letter, or 16 characters long with any combination of characters). On top of that, **2FA has also been enforced on all isomer users**. * Lastly, after gaining access to the repository, **a single user cannot publish content on his/her own**, you have to get another officer/user who has access to the site to approve a request. With the multiple hurdles to overcome in order to publish content on isomer, the chances of site defacement is slim. If your agency is still interested in implementing defacement services, you're welcomed to do so. ## How are sites being monitored? We monitor all isomer sites on monitoring systems (Pingdom and Uptime Robot). Pings to the sites are sent at regular interval to make sure that your sites are running and is sending responses. In situations when our monitoring systems detected that your sites are down, the isomer team will immediately receive a phone call to rectify the issue. At the same time, we will inform you about the issue through email. Alternatively, you may also visit to check the status of your sites. We're looking into the possibility of implementing RSS feeds so that you can subscribe to this and receive notifications when sites are down. ## What are the user access types? **All users on Isomer holds the same access type, editor access**. With editor access, you'll be able to make changes to your site, create a pull request before you launch it, and approve someone else's request. We do not provide pages specific restricted access but do note that all changes are tracked (even a single full stop you add to or remove from the page). That being said, do make changes to your site responsibly as all these changes are being tracked. All isomer team members are admin users (with the ability to create new site, add and remove users, and grant permissions to users) ## How are accounts logs managed? Accounts on isomer are managed by Github (note: Isomer subscribe to the free tier of Github). On Isomer Organisation, [we enforce all users to have their 2FA set up](https://docs.github.com/en/organizations/keeping-your-organization-secure/requiring-two-factor-authentication-in-your-organization). We do not monitor account log in behaviour on Isomer. Any abnormal log in will be handled at Github's level. If you have any questions regarding how [Github keeps your account secure here.](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure) # Pull requests Pull requests are required to publish your content to live. A pull request has to be approved and once it is merged, your changes will be live. Read more about it in the Publish Your Changes section. ## Who can approve my pull requests? Anyone in your team who has access to your repository can approve your pull request. To know who has access to your pull request, simply search for your team on [this page.](https://github.com/orgs/isomerpages/teams) Your team name should be the same or similar to your repository name. ## Can I approve my own pull request? No, you can't. The purpose of having at least 1 approver for a pull request is to have another pair of eyes reviewing your work and making sure that the changes you made are accurate. Having you approve your own pull request will defeat this purpose. ## Can I get Isomer team to approve my pull request? No. the Isomer team will not be able to help you approve your pull request. Pull requests should be done by content owners of the site simply because you are familiar with your content changes. Having an external party to approve for the sake of publishing is the same as approving your own pull request as the external party is not the content owner, therefore is unable to verify the changes are accurate. ## Can I select only a few changes to be merged/published in a pull request? Unfortunately no. This is a limitation imposed by Github, and hence we are unable to change this feature. # Digital KPI This section covers details about the WOGAA Inspect errors which are powered by[ Google Lighthouse Audit.](https://developers.google.com/web/tools/lighthouse) Most, if not all of the errors raised CAN be fixed by users directly by making appropriate edits. We've pulled out a few commonly raised issues below. ## Are you seeing these errors on WOGAA? ![robot.txt is not valid](/files/-MToAbXapIbZYeVjgpxn) ![Document does not have a valid rel=canonical ](/files/-MToAgCfKLGbkDERy0m3) {% hint style="danger" %} A common reason why you're seeing these errors on WOGAA is because you've forgotten to set the url on **config.yml** file. {% endhint %} The **url:** field is usually on line 2 of config.yml file. Make sure that you've inserted your website's URL. ![](/files/-MVve6Bkh1qsKWwbAYYQ) ## Issues that are pending Isomer's team to resolve Here's a list of issues that are pending Isomer team to resolve. *Please ignore these errors, and if you have other errors fixed, you can still hit the target score of 90.* The team will work on fixing these issues and will provide an update once it's fixed. ![](/files/-MS6luBVjefXrCnRO2VC) ![](/files/-MS6hmhbIJfp0TLg3MFs) ![](/files/-MS6m-MjvgiUglKo7K29) # Migration v1 to v2 ## Should I migrate to v2? Yes, all isomer sites are slated to be migrated to v2 by the end of 2021. If you have concerns over this timeline, let us know in advance. ## Why should I migrate? We're launching IsomerCMS sometime in the mid of 2021, and only sites on v2 are able to use the CMS. ## What should I expect? Key things to note: 1. **Schedule a migration day with the Isomer team.** It typically takes 1-2 days (depending on the number of sites). 2. **During migration day.** Please do not make any changes to your site as the Isomer team will be making a snapshot of your site content to be migrated onto version 2. **IF** you happen to make changes during migration day, your new changes will be lost after the migration. ## Will my site be down? No, your site will remain up during the migration period. ## Do I have to back up my old sites? No, Github keeps all records of changes made on the site so there is no need to back up your site. If you still like to keep a copy of your site, you can read our [FAQ on backing up.](/frequently-asked-questions-faq/general-faqs#how-do-i-back-up-my-site-for-archiving-purposes) ## What are the differences between v1 and v2? There are a few key differences between v1 and v2: 1. Homepage : you'll find your homepage on **index.md** on v2 2. Contact us: you'll find your contact us page in pages folder, with the file name **contact-us.md** 3. Resources: for some of you, your resources naming convention may also been updated, you can refer to [here](/configurations/resources/cms-compatible-sites) for more information. # Updates This pages contains the latest product release updates relating to isomer ## 21 Jan 2021 - Adding users to your repository You can now add new users into your own repository through a FormSG form. Do let us know if your email isn't whitelisted as we have to manually add in the whitelisted email domains. ## 14 October 2020 - Free SSL cert on Isomer Traditionally, agency users are required to procure their own SSL certs and send it to the Isomer team to install it on our CDN (Content Delivery Network). With [Let's Encrypt](https://letsencrypt.org/), Isomer is now able to support the provisioning of SSL certs for free. Reach out to us if you're interested in exploring this option!