Skip to main content

Code Widget

This feature available on All Plans (except where noted)

Overview

The Code Widget allows you to add HTML, JavaScript, or other code to your campaign without ShortStack adding any extra markup. Because no additional markup is included, Themes do not affect Code Widgets.

mceclip0.png

To add a Code Widget to your campaign, click the Code Widget icon in the Add Widgets Panel, or drag the icon into your preview area.

Note:

  • Code Widgets are invisible in live campaigns unless used to embed external content.
  • On the Free Trial, any Code Widgets in your campaign templates will not be editable.

Widget Settings

The widget settings popup lets you configure your Code Widget.

Renaming the Widget

  • Click the pencil icon in the top-left corner (next to the name), type your new name, and confirm by clicking the blue check button.

CSS ID

  • The CSS ID (starting with a #) is displayed in the top-right corner of the popup.

Customization

Use the menu on the left side to navigate the settings. Use the Back and Next buttons at the bottom to move between sections.

When finished, click the blue Save and Exit button.

Library

The Library section allows you to view and use saved code snippets.

Working with Snippets

  1. Filter Snippets: Use the icons at the top to filter:
    • Public snippets (Screen_Shot_2022-04-20_at_10.34.09_AM.png icon)
    • Private snippets (Screen_Shot_2022-04-20_at_10.33.22_AM.png icon)
    • All snippets (All button)
  2. Search Snippets: Use the search bar to quickly find a specific snippet.
  3. Preview and Use: Click a snippet title to preview it, then click Choose to use it.

If code is already present in the Content section, the button will read Append to add the snippet at the end of your code.

Updating Snippets

For private snippets, click Update to overwrite the snippet with your current code. Confirm your changes in the pop-up.

Note: This action cannot be undone, so double-check your content before updating.

Deleting Snippets

To delete a snippet:

  1. Select the snippet by clicking its name.
  2. Click the trashcan icon next to the Choose/Append button.

Content

The Content section contains the code editor where you can type or paste your code.

Guidelines

  • No Extra Markup: Your code is added exactly as written.
  • HTML Tags to Avoid: Do not include <html>, <head>, or <body> tags, as they are already part of the campaign's source code.
  • CSS Recommendation: Add CSS to the CSS Editor in the Style Panel instead of the Code Widget.

Editor Features

Four dropdown menus offer additional tools:

  1. Edit: Shortcuts like Undo, Redo, Find, Replace, and Toggle Comments.
  2. Insert: Add JavaScript Event Templates or select code snippets from the Library.
  3. Format: Use Auto Indent options for cleaner code formatting.
  4. Tools:
    • Download Content: Save your code as a .txt file.
    • Upload (replace): Replace existing code with content from a .txt file.
    • Upload (append): Append a .txt file’s content to the existing code.

Placement

Choose where the Code Widget places your code. Options include:

  1. After <head>: Code appears after the opening <head> tag.
  2. Before </head>: Code appears before the closing </head> tag.
  3. After <body>: Code appears after the opening <body> tag.
  4. Inline: Code appears in the widget's position within the Edit Widgets Panel (default).
  5. Before </body>: Code appears before the closing </body> tag.

Points For Actions

In Points For Actions campaigns, reward entrants for triggering events defined in your code:

  1. Set the number of points to award.
  2. Use the dropdown to select the Form Container Widget where entries are submitted.
  3. Add an Action Label in the designated field.

Note: Points For Actions is available on the Pro Plan.

Visibility

Visibility settings for Code Widgets include:

  • Active: Widget is functioning.
  • Inactive: Widget is disabled.
  • Popup: Display embedded content as a popup.

Advanced Visibility Options

Enable the Show content to bots only checkbox to make the widget content visible only to bots (e.g., Facebook or LinkedIn).

Notes:

  • This setting does not work for Code Widgets inside Container Widgets.
  • When enabled, other visibility settings are ignored.

Bots can read Open Graph meta tags and any additional meta content you add via this widget.

 

 

Was this article helpful?