How to Add Custom HTML, CSS and JavaScript

Morten Toft Updated by Morten Toft

Adding your own custom HTML, CSS and JavaScript can be a very powerful way to customise your workspace even more. Before you continue, make sure of the following:

1. You need to be an admin or owner of the workspace you want to set this up on.

2. You need some basic understanding of HTML, CSS and JavaScript.

3. You need a Google Tag Manager account and a container. The account is free and can be created here.

After you have made sure of the prerequisite we can get started.

1. First you need to go to Settings -> Integrations and click on the integration called Google Tag Manager. Enter the container ID of your Google Tag Manager container. The ID is formatted as GTM-XXXXXX.

2. Now you need to go to your Google Tag Manager account, click on Tags and add a new tag. The tag configuration needs to be Custom HTML and the triggering needs to be set to Load.

3. Add as much custom HTML, CSS and JavaScript that you want. You need to keep in min that Ideanote uses shadow dom which means you wont be able to add global queries and CSS that can target all elements. Instead you need to inject the CSS and HTML into the components that you want to extend. Heres an example of how you can add a new option to the side navigation and a new background color. If you need any assistance, feel free to contact our support team.

4. When you want to publish your changes, save the tag and click publish.

5. Go back to your Ideanote Workspace and reload the page. You should now see the changes. The image below is based on the code from step 3.

How did we do?

How to Add a Custom Domain

Contact