Articles in this section

See more

Code Widget

Avatar
Justin Heeren
  • Updated
Follow

Overview

Use the Code Widget to add HTML, JavaScript, or other code to your campaign without ShortStack adding any extra markup. Because the usual widget markup is not included, Themes have no effect on Code Widgets. Use a Plain Text Widget instead instead of the Code Widget if you want the contents to have the visual widget style provided by a theme.

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>
 


Setup

Type HTML, JavaScript, or other code into the field in the Setup section.

Screen_Shot_2018-09-05_at_10.26.09_AM.png

Library

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 in the Setup section, name the snippet, and click the Save to Library button beside it. 

Screen_Shot_2018-09-05_at_10.29.24_AM.png

To use a saved Snippet, click the Library button. 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. 

Screen_Shot_2018-09-05_at_10.28.24_AM.png

Placement

Use the options in the Placement menu to choose where the Code Widget places your code. There are five options: 

Screen_Shot_2018-09-05_at_10.31.03_AM.png

  • 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.

Common Code Examples

Typically, custom code is outside of the scope of our support. However, there are some oft-used snippets of code not in the Code Library that might come in handy - here are a couple:

Turning Off Search Engine Indexing

This snippet will remove your campaign from being indexed by any of the major search engines:

<meta name="robots" content="noindex">


If you want to block Google's search bots specifically, you'd use this snippet:

<meta name="googlebot" content="noindex">


Adding a Page Title to Your Campaign

To add a page title to your campaign that will appear in the tab or new window of a web browser, you'd just use this tiny piece of HTML:

 <title>Your Campaign Name Here!</title>

 

Related articles