Understanding the Code Widget
The following HTML shows what ShortStack adds to the source for the Campaign when you have two Plain Text Widgets surrounding a Code Widget. For the Plain Text Widgets, only PLAIN TEXT CONTENT was entered into the Contents box, and for the Code Widget, CODE WIDGET CONTENT was entered. Note all the extra markup included by ShortStack for the Plain Text Widgets and that no extra markup is included for the Code Widget:
<div class="ss_box ss_text ss_odd" id="text"> <div class="ss_box_header ss_text_header" id="header_text"> <h3>Text</h3> </div> <div class="ss_box_content ss_text_content" id="content_text"> PLAIN TEXT CONTENT </div> <div class="ss_box_footer ss_text_footer" id="footer_text"> </div> </div> <div id="clear_text"></div> CODE WIDGET CONTENT <div class="ss_box ss_text ss_even" id="text2"> <div class="ss_box_header ss_text_header" id="header_text2"> <h3>Text2</h3> </div> <div class="ss_box_content ss_text_content" id="content_text2"> PLAIN TEXT CONTENT </div> <div class="ss_box_footer ss_text_footer" id="footer_text2"> </div> </div> <div id="clear_text2"></div>
To save code you enter into the Code Widget for use again in the future, you can turn it into a Code Snippet and save it in your Code Library. Find the Give it a name... field below the main text area, name the snippet, and click the Save to Library button beside it.
To use a saved Snippet, click the Library button in the Edit Widget window. By default, the Code Library displays the public snippets. Click Your Library to see a list of your personal snippets. Click a snippet title to see a preview of the snippet. To use that snippet, click the Add to Code button at the top of the Edit Widget window.
Use the options in the Placement menu to choose where the Code Widget places your code. There are five options:
- Inline: This is the default location for the Code Widget. Your code will appear where this Code Widget appears within the Edit Widgets Panel.
- After <head>: the code will appear after the opening <head> tag.
- Before </head>: the code will appear after the opening </head> tag.
- After <body>: the code will appear after the opening <body> tag.
- Before </body>: the code will appear before the closing </body> tag.