The Custom HTML block is not available in ONTRApages Free accounts
The Custom HTML Block
This block is intended for advanced users and coders only. It provides the ability to add raw HTML code to ONTRApages. ONTRAPORT can not support or troubleshoot your custom code.
NOTE: Adding the Custom HTML Block with coding errors to an existing, published page can cause the entire page to exhibit defects, such as lack of mobile responsiveness, or completely fail to display. Please use caution and consult with a qualified HTML programmer if you need assistance.
- To add the block, select it from the palette in the Add Block screen.
- The Custom HTML Block loads with the HTML sample code displayed in WYSIWYG mode. Click the Edit Code button at the top left of the canvas to see the code.
- Delete the sample code and type or paste your code into the Edit Code screen. Click the Preview Code button to revert to WYSIWYG mode.
Custom HTML Block Editor
The code editor uses simple editing commands with some syntax highlighting. It does not include an integrated development environment (IDE), macros or other advanced features. The code validates as HTML and HTML5 is supported.
Editor Command Keys
|Go to Doc Start||Ctrl-Home||Cmd-Up|
|Go to Doc End||Ctrl-End||Cmd-End|
|Go to Line Start||Alt-Left||Ctrl-A|
|Go to Line End||Alt-Right||Ctrl-E|
|Page Up||Page Up||Shift-Ctrl-V|
|Page Down||Page Down||Ctrl-V|
|New Line and Indent||Enter||Enter|
The code will inherit the ONTRApage Page Styles unless you specifically overwrite them. The ONTRAPORT Page Style classes that are inherited are:
Recovering from Errors
You can toggle visibility of the Custom HTML Block in the palette by hovering over it and sliding the toggle. It will turn red. Save the page and visit or refresh the published page to verify the code is no longer rendered on the page.
The Custom HTML block is intended for advanced users and coders only, and no support is provided for it. If you need assistance with custom coding we suggest you contact one of our Certified Consultants or a qualified HTML programmer.
Use Case: Use A Link or Button to Jump to Another Block
- Add a Custom HTML Block to the template, then move it to just above the block you want to "jump to".
- Delete all the code in the Custom HTML Block and add this code:
- Publish the ONTRApage and copy the URL to the clipboard.
- Edit the button or link and paste in the page's published URL. Add #here to the end of the URL. This tells the button or link that a click should send the browser to that Custom HTML Block with id="here".
The button click will now jump to the Custom HTML Block. Because it has no real content to display, it collapses gracefully and the block immediately below it is in view. You can have multiple buttons or links jump to that Custom HTML Block using this technique.
You can duplicate this with as many Custom HTML Blocks as desired as long as you use a unique name for the id= portion of the code.
Use Case: Tabbed Content Area
This use case uses code from Andor Nagy to demonstrate adapting code for the Custom HTML Block. The full customized code is found in the attached file named andor-nagy-create-pure-css-tabs.txt.
Rules for Adapting Code:
- Remove <head> information from the code (if any) and include it in the proper sections on the Settings tab.
- You can include style declarations at the top of the Custom HTML Block enclosed in <style> ... </style> tags.
- Remember the Preview Code view will not enable all interactive features of the code within the ONTRApages editor. View the published page to test.
Use Case: Embedding an Appointment Calendar
This use case involves embedding a booking calendar's iframe code. Iframes are commonly used for calendars, maps, and other interactive apps from third party publishers. Using the iframe code is very simple.
- Paste the iframe code into the Custom HTML Block.
- Add any padding or positioning HTML elements as needed.
- Publish and test the page.
Most iframe code will work as copied. Things to remember when using iframes:
- The Preview Code button provides a preview of static HTML but not all features can work within the ONTRApages editor, and the iframe may not render completely.
- Publish the page to test the inserted application's functionality before assuming there's a problem with the code.
- Iframes will not automatically inherit the ONTRApage style and will need to be configured in the native application to match the page's fonts, colors and layout.
Q. Support tells me you can't help me create a Facebook clone for my ONTRApage Custom html block. Zuckerberg was still a student when he did it so it can't be that hard.
A. We don't support custom coding at all, even for simple applications. We recommend you contact a qualified HTML programmer to create your application.
Q. My fonts in my Custom html block don't match the rest on the page. What's up?
A. The Custom html block should inherit the Page Style settings for the following classes: h1, h2, h3, label, button, large-body-text, body-text and blockquote. If you have used a local style declaration for any of these classes it may override the Page Style settings. If you have inserted iframe code you will have to edit the source application to match the Page Style settings.
Q. I copied some code into the Custom html block and it works, but the comments in the code are showing through. What's up with that?
Q. I inserted code into the Custom HTML block and now my page isn't responsive. What gives?
A. ONTRApages are mobile responsive. Adding an HTML block that isn't responsive can cause the entire page to become unresponsive.
Q. Are there Custom HTML Blocks for ONTRAforms and ONTRAmail too?
A. Custom HTML blocks are available on ONTRAforms, but not ONTRAmail.
Q. Can I use Custom HTML Blocks for Google's Conversion Tracking?
A. Yes you can. Google's conversion code needs to be in the body of a page, not the footer. HTML blocks will show the code in the body which will help you optimize your ad words.
Q. Why can't I share my page with a Custom HTML Block via the Marketplace?
A. For security reasons we have disabled sharing for pages and forms that contain Custom HTML Blocks.
Q. I tried using your code example for tabbed content, and then edited it to include 12 extra tabs with all my cat's names, and now it doesn't display. It's your code, fix it or I'll whine on the Internet.
A. We don't support custom coding, and cannot assist you even with modifications of code samples we have provided. The Custom HTML block is intended for developers and programmers, and therefore is an official no whining zone.