How do I add external stylesheets or scripts into my site?

liveBooks Support

Our advanced developer tools allow you to place external stylesheets or scripts on your site, either before or after the existing custom file. See steps below for specific direction on adding stylesheets or scripts into the <head> or <body> portion of your site structure.


Adding an External Stylesheet

1. Select the Developer Tools icon in your Dashboard navigation bar. You will be taken to the CSS panel by default:

Screen_Shot_2017-12-06_at_10.52.59_AM.png

2. Scroll to the bottom of the page and you will see an area for External stylesheets.

3. Select the green Add URL button and a panel to input your external stylesheet URL will appear. If you would like, you may paste in any link tag, so you could paste this in the first field (as an example):

<link rel="stylesheet" type="text/css" href="https://yourexternalhosthere.com/style.css" id="stylesheet">

Important: Make sure that "https://" is specified at the beginning of your external URL, or your stylesheet will not save properly.

Screen_Shot_2017-12-06_at_11.04.45_AM.png

Optional: Open the Advanced panel if you need to add customized attributes for your stylesheet.

The fields will automatically parse out the correct attributes for your stylesheet. If you open the Advanced area, you may see "Id" or "Subresource Integrity" has been filled in after the paste action. All of the fields can be filled manually, as well.

4. Once all the fields appear have been filled-out as you need, select the blue Save button.

5. Select the green Publish button to make your change live on the site.


Adding an External Script

1. Select the Developer Tools icon in your Dashboard navigation bar.

2. You will be taken to the CSS panel by default, so select the Head JS or Body JS, depending on where you need to place your external script.

Screen_Shot_2017-12-06_at_11.07.36_AM.png

3. Scroll to the bottom of the page and you will see an area for External scripts.

4. Select the green Add URL button and a panel to input your external script URL will appear. If you would like, you may paste in any script tag, for example, you could paste into the first field:

<script src="https://load.website.com/" data-custom-id="db4d7a7cb59db5fb41c3d5de" async="async"></script>

Important: Make sure that "https://" is specified at the beginning of your external URL, or your script will not save properly.

Screen_Shot_2017-12-06_at_11.04.45_AM.png

Optional: Open the Advanced panel if you need to add customized attributes for your script.

The fields will automatically parse out the correct attributes for your script embed. If you open the Advanced area, you may see "Id" or "Subresource Integrity" has been filled in after the paste action. All of the fields can be filled manually, as well.

An area for Data Attributes is also available to you. Select the green Add Data Attributes button to add custom Data attributes.

5. Once all the fields appear have been filled-out as you need, select the blue Save button.

6. Select the green Publish button to make your change live on the site.