Inserting and modifying HTML or JavaScript

You can insert custom HTML or JavaScript into a custom HTML gadget or as a snippet into a content gadget on a page or page template. Inserting code as a snippet combines the code with the rest of the content gadget code, while inserting code as a custom HTML gadget keeps the code separate and makes it more easily relocated. You can also insert custom HTML as a snippet into an email, email template, or event description.

Important Note: Recent changes in the way common browsers handle third-party cookies might cause errors with custom JavaScript.

Please view our article about Cookies for details.

You might want to insert custom code to embed audio or a video clip, or to embed a third-party widget from Google or Facebook. You can also add JavaScript code and apply it to all the pages on your site.

Pro Tip: We recommend that only experienced users make changes to their JavaScript code. Incorrect code formatting can cause errors in your website's functionality. 

Inserting a custom HTML gadget

A custom HTML gadget executes custom HTML or JavaScript code and can be easily moved to a different location on a page or page template. To insert a custom HTML gadget, follow these steps:

1. Go to Website > Sites pages and begin editing the site page or page template.
2. Click the Gadget list to display the list of available gadgets.
3. Drag the custom HTML gadget from the Gadget list, and drop it on the desired location.
4. After you have inserted the gadget, hover over the gadget and click the Settings icon.
5. Within the gadget settings on the left, click the Edit code button.
   
6. In the dialog that appears, enter your HTML or JavaScript code then click the Save button. Make sure your code does not violate any of the code restrictions (below). For instructions on using the code editor, click here.
   
7. Click the Save button to save your changes to the page.

Inserting a code snippet

To insert a snippet of HTML or JavaScript code in a content gadget on a WildApricot page or page template, or in an email, email template, blog post, or event description, follow these steps:

1. Begin editing the site page, page template, email, email template, or event description to open the code editor.
2. Click within the content gadget, email body, or event description where you want to insert your code.
3. Click the S (Snippet) button within the toolbar towards the top of the screen.
4. Within the code box, enter the HTML or JavaScript code. Make sure your code does not violate any of the code restrictions (below). For instructions on using the code editor, click here.
5. Click Insert to exit the window.
6. Click Save to save changes to the page.

In some cases, the element to be displayed by the code will be represented in edit mode by a snippet icon.

Once you switch to public view, the icon will be replaced by whatever your code is meant to display.

Inserting global JavaScript

Pro Tip: We recommend that only experienced users make changes to their JavaScript code. Incorrect code formatting can cause errors in your website's functionality.

To add JavaScript code to all the pages on your WildApricot site:

1. Navigate to Website > Settings then click Global JavaScript (under Site settings). 

2. In the code editor, enter your JavaScript. Make sure your code is surrounded by <script> and </script> tags. For instructions on using the code editor, click here.

Only full administrators can access the Global JavaScript screen.

If you're including comments in your code, you need to format them differently depending on where they appear. If your comment is outside a script tag, enclose the comment within <!-- and -->. 

For example:

<!-- If you're inserting a comment OUTSIDE of your script tags, it needs to look like this -->
<script type="text/javascript">

If your comment is within a <script> tag, then your comment should begin with // . 

For example:

<script type="text/javascript">
// However, if you're inserting a comment INSIDE of your script tags, it needs to look like this
jq$(document).ready(function(){
    jq$("#FunctionalBlock1_ctl00_subscribeButton").attr('value', 'Subscribe Today');
});
</script>

Modifying the HTML code

Pro Tip: We recommend that only experienced users make changes to their JavaScript code. Incorrect code formatting can cause errors in your website's functionality.

To view or modify the HTML code for a content gadget, page template, email, email template, or event description, follow these steps:

1. Begin editing the site page, page template, email, email template, or event description.
2. Click within the content gadget, email body, or event description where you want to view or modify the code.
3. Click the HTML icon within the toolbar. Note: In some content editors, the Edit HTML option can be found within the More menu.
4. Adjust the code as required then click Save. For instructions on using the code editor, click here.
   

Coding restrictions

• If you fail to close certain HTML tags, your page can become inaccessible. The tags you must close include the following:
  • <!--
  • <IFRAME>
  • <SCRIPT>
  • <APPLET>
  • <NOEMBED>
  • <NOFRAMES>
  • <NOSCRIPT>
  • <TEXTAREA>
  • <XMP>
  • <OBJECT>
  • <MARQUEE>
• Do not use the <PLAINTEXT> tag. If you do, it will be automatically removed from your code
• Do notinclude any of the following commands within your custom code:
  • document.write()
  • document.writeln()
  • document.open()
  • object.write()
  • object.writeln()
  • object.open()

where object is the name of a target object