This feature available on All Plans (except where noted)
Contents
Widget Settings
Library
Content
Placement
Points for Actions
Visibility
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.
To add one of these widgets to your campaign, click the Code Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Note: Code Widgets are never visible in your live campaign (with the exception of when you're using them to embed external content), so feel free to place them wherever works best for the organization of your campaign.
While you may see Code Widgets as part of a template, when on our Free Trial any Code Widgets in your campaigns will not be editable.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Code Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Code Widget (and what you're displaying) in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Library
By default, the widget settings will open to the Library section, so that you can start with a code snippet if you so choose. View and use code snippets you've saved (marked with an 
icon) or snippets from our public ShortStack collection (marked with an 
icon). Alternatively, you can start from scratch by clicking Start without any snippet.
To filter through the snippets: Click the icon at the top to see only public snippets, the icon to see just private snippets, and the All button to show both. You can also use the Search field to quickly find a snippet with a specific name. Then, click a snippet title to see a preview of the snippet.
To use that snippet, click the Choose button. 
If you already have code added in the Content section of the widget settings, you'll notice that the button instead reads Append - clicking this will add the selected snippet to the end of your existing code.
In addition (for private snippets), there's an Update button that will take whatever is currently in the Content section of your widget settings and update the currently selected snippet to match it. You'd simply click the Update button, then click OK in the pop-up to confirm that you want to make those changes.
Note: The update process is not able to be undone, so make absolutely sure that the content is updated to include exactly what you want to have in the snippet!
To delete one of the snippets from your library; click the snippet name to select it, then click the trashcan button to the right of the Choose/Append button. Or if you just want to close the snippet preview, click the X button.
Content
The Setup section contains the code editor window where you'll type or paste in your code.
What you type into the editor is added exactly as written to the web page source of your campaign. As mentioned before, no extra markup is included.
If you are using HTML, do not include the following tags:
<html>
<head>
<body>
These tags are already present in the campaign's source code.
When entering JavaScript or CSS, be sure to also enter the appropriate script or style tags. However, we suggest adding CSS to the CSS Editor (available in the Style Panel) instead of a Code Widget.
Four drop-down menus are available to help you get your code up and running as quickly as possible:
- Edit: Includes commonly-used coding shortcuts - including Undo, Redo, Find, Find Next, Find Previous, Replace, and Toggle Comments. You can also perform any of these functions by using the provided keyboard shortcuts.
- Insert: Options here include adding a JavaScript Event Template (more information on how to use that in our Customizing Behavior with Events help doc), and adding code From Library... - the latter will open the Library section of the widget settings so you can select a snippet.
- Format: A couple of formatting options live here, including Auto Indent All (which auto-indents all the code currently in the editor) and Auto Indent Selection (which only auto-indents selected code).
- Tools: If you'd like to download all of the code you've written up for use somewhere else, or upload some code you've saved as a text file on your computer, this section has the tools you need. Download Content will save the entered code as a .txt file to your desktop, Upload (replace) will allow you to choose a .txt file from your desktop to use in the editor (and will replace any code already in the editor, and Upload (append) will also allow you to choose a .txt file from your desktop, but add it to the end of the code already in the editor.
Placement
Use the options in the Placement section to choose where the Code Widget places your code. There are five options:
- 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.
- Inline: This is the default location for the Code Widget. Your code will appear where this Code Widget appears within the Edit Widgets Panel.
- Before </body>: the code will appear before the closing </body> tag.
Points For Actions
If you're running a Points For Actions campaign, the settings for rewarding points to entrants who trigger something specifically laid out in your code are in this section. Set the number of points to award using the first field, and then use the dropdown to select the Form Widget in which your entrants are submitting their entries.
If you're using Advanced Points for Actions, make sure to add an Action label using the field provided.
Note: Advanced Points for Actions is currently only available by request. Reach out to our sales team for more information.
Visibility
Visibility works slightly differently for Code Widgets. Since most are invisible on live campaigns by default, the options are to have the widget normal (active) or inactive, or (in the case of an embed) you can choose popup. If you set a date or country-specific settings, those settings will determine when/where the Action Widget is active. More information about these settings can be found in the Widget Visibility help doc.
If you click open the Advanced section at the bottom, there's also access to a Show content to bots only checkbox; to have the code in this widget readable by bots only, check this box.
When ShortStack detects that a bot is trying to view your live campaign, we normally only serve Open Graph meta tags to the bot; any actual widget content is hidden.
When this setting is enabled, the Code Widget will be shown only to bots, such as the ones that Facebook and LinkedIn use to read Open Graph meta tags. You can use this to include additional meta tags or content that you want the bot to see.
Note: This setting only works for Code Widgets that are not inside Container Widgets. In addition, when enabled, other visibility settings will be ignored.
