Home

Download this help site
(PDF 80MB)

Download

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 an audio or 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).

Icon

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:

 Read more/less
  1. Go to Sites pages (under the Website menu) 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. 



    When a layout section or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout section or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
  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). 

  7. Click the Save button to save your changes to the page.

Inserting custom code into a content gadget, email, blog post, or event description

To insert 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:

 Read more/less
  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). 

  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 (in this case, a Google search bar).

 

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, go to Settings then click Global JavaScript (under Site settings). In the code box, enter your JavaScript.

 Read more/less

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.

 

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:

 Read more/less
  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. 

  4. Adjust the code as required then click Save to save your changes. 

  5. Click the Save button to save your changes.
Icon

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 considerations

  • If you fail to close certain HTML tags, your page made 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 not include 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.

On this page: 

See also:

 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7