How to Insert Custom Code or a Third Party Widget

Modules
Sometimes it is necessary to insert custom HTML, JavaScript and/or CSS into a website.  The method described in this article can be used to implement custom client-side code on any SiteWizard CMS web page. 
 

Support for Third Party Widgets

Third party "widgets" can be added into SiteWizard CMS as long as they are implemented using client-side technologies (HTML, JavaScript, CSS).  SiteWizard does not permit users to upload server-side code (ASPX, PHP, etc).
 
 

Custom Code Module

SiteWizard CMS includes a Custom Code module which provides an HTML code editor.  This editor has syntax highlighting, tag completion and other code editing features to assist users with writing custom HTML.  This module can be used to write new code "from scratch" or to paste in a third party HTML/JavaScript widget.  All HTML tags are permitted, including <script>, <style> and <iframe>.
 
Step 1 - Log into your website as an administrator.  Note:  Your username is not "admin" or "administrator".  You created a unique username during your website setup.
 
Step 2 - Navigate to the page where you want to insert custom code.
 
Step 3 - Choose New from the Modules section of the Control Panel.
 
 
Step 4 - Select Custom Code from the Add Module dialog.  This is found under the Advanced folder near the bottom of the drop-down.
 
 
Step 5 - Add a Title for your module.  Depending on the contents of your module, you may also want to set the Container to None.  When done, click the Add Module button.  (Note:  You can show/hide the Container later by changing the the Display Container checkbox in the module's settings dialog.)
 
 
Step 6 - The module will be empty because it has not been configured.  Open the module's Settings dialog.
 
 
Step 7 - Go to the Custom Code (HTML/JS/CSS) tab and paste your custom code into the editor.  You may delete the <!-- Insert your HTML here --> comment.  When done, click the Update button to save your changes.
 
 
Your custom code should be displayed in your web page.  If you need to make any changes, use the module's Settings dialog again until your work is done.
 

Important Note Regarding Forms

Some third party widgets include a <form> tag.  This presents a technical problem.  All SiteWizard CMS pages are already wrapped in a <form> tag.  Web browsers do not allow adding a <form> inside of another <form>.  This means that it is impossible to add another <form> tag directly inside of your page.
 
The Custom Code module uses a workaround to deal with <form> tags.  If a <form> tag is detected in your custom code, the module dynamically creates an <iframe> (embedded HTML page) and injects your custom HTML code into it.  It also intelligently detects your web page's text styles and copies them into the <iframe>.  It even automatically resizes the frame to avoid showing scroll-bars around your custom code. 
 
The end result is that your custom HTML (including your <form>) should work automatically.  It should look and function the same as if your code were directly inserted in the page.  However, if you encounter problems, you may need to follow the instructions below for Uploading Custom HTML.
 

Uploading Custom HTML

In rare cases, the Custom Code module alone may not be a good fit for your needs.  An alternative method of adding custom code is to create HTML files on your computer, then upload them into SiteWizard CMS.
 
The workflow would be as follows:
  • Create an HTML page on your computer using the editor of your choice (Visual Studio, WebMatrix, Dreamweaver, etc).
  • Upload the HTML file to your website using Admin > File Manager.
  • Add an IFrame on your web page which points to the file you uploaded.  An IFrame can be added using any of these modules: 
    • IFrame module - This is the easiest option.  Any uploaded file can be selected from the module's settings.
    • Custom Code module - This requires you to manually add an <iframe> tag in the HTML editor.
    • Text/HTML module - This requires you to click the HTML tab at the bottom of the editor to manually add the <iframe> tag.
If you need assistance with adding custom code to your SiteWizard CMS website, please submit a support ticket explaining your use case.  If possible, include the custom code that you are trying to integrate (attach a file or paste the HTML into the ticket).

Add Feedback