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.

You might want to insert custom code to embed audio or a video clip, or to embed a third-party widget from Google or Twitter.

You can also add JavaScript code and apply it to all the pages on your site.

As well, you can display the HTML for any content gadget, email, or event description, and modify it as you wish, subject to code restrictions (see below).

Be careful when inserting HTML or JavaScript code since erroneous code can result in incorrect page display and problems with editing the page.

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 Sites pages (within the Website module) 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 Wild Apricot 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.
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

If you want to add some JavaScript code to all the pages on your Wild Apricot site, and all pages you create in the future, click Settings within the Website module then click Global JavaScript (under Site settings). 

In the code box, 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.

You could, for example, add JavaScript code to use Google Analytics to track traffic to your Wild Apricot site. You can add multiple scripts, one after the other.

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

If you want 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. (When editing a blog or forum post, the Edit HTML option can be found within the More menu that appears on the toolbar.)  
4. Adjust the code as required then click Save to save your changes. For instructions on using the code editor, click here.
5. Click the Save button to save your changes.

If you are frequently editing your site's HTML, you might want to use a dedicated HTML editor to make your changes then copy and paste the code back into Wild Apricot.

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.