This feature available on All Plans
Contents
Widget Settings
Setup
Library
Placement
Visibility
Overview
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.
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.
Setup
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.
There are some keyboard shortcuts available while using the code editor; these are listed below, or you can find the same list by clicking the 
icon shown under the editor window.
If you've written a snippet of code that you want to save for future use in other campaigns, you can easily do so. Just type a name for your code snippet into the Give it a name... field, then click the Save to Library button.
Library
To view and use code snippets you've saved or from our public ShortStack collection, check out the Library section. By default, the library displays the snippets from the public library.
Note: The public code snippet library is only available on the Agency Plan or higher.
Click Your Library to see a list of your personal snippets, and click a snippet title to see a preview of the snippet.
To use that snippet, click the Add to Code button.
To delete one of the snippets from your library; click the snippet name to select it, then click the trashcan icon to the right of the Add to Code button.
Placement
Use the options in the Placement section 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.
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.
