Add External Stylesheets/Script to Your Website

IMPORTANT: The steps in this article require developer permissions.

Please note that the following article is for advanced users who are comfortable with creating code. We do not recommend adding code unless you are completely comfortable with it, because we cannot support that code.

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 the gray navigation bar. You will be taken to the CSS panel by default:

Screen_Shot_2018-10-02_at_10.27.11_AM.png

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

Screen_Shot_2018-10-02_at_10.28.34_AM.png

3. Select the green Add URL button and a panel to input your external stylesheet URL will appear.

Screen_Shot_2018-10-02_at_10.35.22_AM.png

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.

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 take your changes live!


Adding an External Script

1. Select the Developer Tools icon in the gray navigation bar.

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

Screen_Shot_2018-10-02_at_10.50.28_AM.png

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

Screen_Shot_2018-10-02_at_10.55.30_AM.png

4. Select the green Add URL button and a panel to input your external script URL will appear.

Screen_Shot_2018-10-02_at_10.58.10_AM.png

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.

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 take your changes live!

Powered by Zendesk