Custom Code

You can use custom code to extend Without Code’s capabilities and add features. There are a few different methods for adding code.

Notes:

  • Before you add or edit any custom code make sure that you backup your site to ensure you can rollback if needed.
  • Test custom code on a test page before adding it to your actual site.
  • Our support team can’t troubleshoot custom code.

HTML Widget

ADDING WIDGET

To add custom code using this widget, open the Widgets tab and search for the HTML widget.

Drag this widget into the desired location of your editor. If you place this in the header or footer, this code will appear on all pages and if you place it elsewhere, it will only appear on the single page. Drop the widget and it will open the content and design options. Under the content tab you can insert your code.

Using the design tab you can choose the background color, border, and spacing.

EDITING CODE

Once custom code is placed in the HTML widget, you can typically select the widget to open the editor, but you can also select the container where the code lives and select “Edit HTML/CSS.”

Editing Code Inline

Edit code inline by right-clicking on any element, then select “Edit HTML/CSS.”

This will bring up the raw code, which you can edit.

Note: we recommend that you don’t add new selectors here, and instead add them using the developer mode.

Connected Data Using the HTML Content

To connect data within the HTML embed code, first you will paste your code into the HTML widget. Then you'll highlight the portion of the code you wish to replace with the dynamic content from the collection.

Click the "Connect" button on the top of the widget.

Using the popup window that will appear, select the content from the collection you wish to use.

The appropriate string for the chosen connected content will now be copied to your system's clipboard. You can now right-click > paste that copied string to replace the highlighted portion of the code with the connected content.

Developer Mode

View the code for the entire site by selecting the “</>” icon from the top menu.

This will open your dev mode panel; the code is broken into sections so you can easily edit the correct area. Read more about the dev mode.