Company Blog Support
Frank Hagan
posted

Contents

    Back to Top

    ONTRApages Custom HTML Block

     

     

     

    About the Custom HTML Block

    The Custom HTML Block allows you to add raw HTML code into the body of your ONTRApage, further expanding the page's capabilities. Possible uses include adding a tabbed content block, inserting your appointment calendar, using a legacy Smart Form, adding in JavaScript snippets, and code to connect to your custom coded, external application.

    Prerequisites

    The Custom HTML block is not available in ONTRApages Free accounts

    Custom HTML Block Basics

    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.

      add Custom HTML block

    • 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.

      edit code button

    • 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.

      sample code

    Note that the Preview Code view does not enable all functions such as animations and JavaScript / jQuery actions in your code. Publish the page to test all the functionality on a live webpage.

    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

    Command PC Mac
    Select All Ctrl-A Cmd-A
    Delete Line Ctrl-D Cmd-D
    Undo Ctrl-Z Cmd-Z
    Redo Ctrl-Y Shift-Cmd-Z
    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
    Tab Tab Tab
    Indent Auto Shift-Tab Shift-Tab
    Indent More Ctrl-] Cmd-]
    Indent Less Ctrl-[ Cmd-[
    Transpose Characters   Ctrl-T
    New Line and Indent Enter Enter
    Toggle Overwrite Insert Insert
    Save Ctrl-S Cmd-S
    Find Ctrl-F Cmd-F
    Find Next Ctrl-G Cmd-G
    Find Previous Shift-Ctrl-G Shift-Cmd-G
    Replace Shift-Ctrl-F Shift-Alt-F
    Replace All Shift-Ctrl-R Shift-Cmd-Alt-F

     

    The code is inserted into the body section of the page. You can include style elements, JavaScript and HTML. All HTML5 new elements are supported.

    If present, <html> and <head> sections are stripped from the code when saved. For <head> element entries, such as meta description, page title, and favicon see the Settings tab of the ONTRApage. Use the Custom header code section on the Settings tab for meta tags, JavaScript you want to appear in the <head> section, etc.

    The code will inherit the ONTRApage Page Styles unless you specifically overwrite them. The ONTRAPORT Page Style classes that are inherited are:

    • h1
    • h2
    • h3
    • label
    • button
    • large-body-text
    • body-text
    • blockquote
    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.

    Toggle visibility of block

    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
    1. Add a Custom HTML Block to the template, then move it to just above the block you want to "jump to".
    2. Delete all the code in the Custom HTML Block and add this code:

      <div id="here"></div>

    3. Publish the ONTRApage and copy the URL to the clipboard.
    4. 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".

    Jump to this block

    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 Using CSS

    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.

    Tabbed interface in Custom HTML Block

    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 JavaScript in the Custom HTML Block.
    • 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.

    1. Paste the iframe code into the Custom HTML Block.
    2. Add any padding or positioning HTML elements as needed.
    3. Publish and test the page.

    iframe booking calendar

    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.
    Other Coding Resources
    FAQs

    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?

    A. Remember to use the appropriate comment tags for the section of the code you are inserting. It is common to find code examples on the Internet that do not have comments coded correctly. Use the appropriate comment tags for HTML, CSS and JavaScript in the Custom html block.


    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.

     

     

     

     

     

    Other Resources

    ONTRApages Basics:

    Selling Products and Leveraging Upsell Opportunities

    Publishing Your ONTRApages

    Articles in this section

    Have more questions? Submit a request

    Comments

    Powered by Zendesk