Adding Local HTML Files

While we cannot import unpublished web pages, we can add html files directly to the builder. In most cases, a client or designer would provide html page files and their corresponding assets folders (images and JavaScript). We can add all of the files to the funnel with only minor adjustments.

First, prep your code:

Make sure the web pages are saved as HTML files.
Go to Funnel Settings > Maintenance > File Upload and upload the included css and js files. You can only upload individual files, not folders. Keep in mind, these files, and any newly added assets thereafter, will not be available until you publish the funnel.
Open your html file in a Notepad or other text editor. Find and Replace references to your newly uploaded assets (css, js. etc). Update the original source paths to the new funnel assets path using the full url of the published funnel.

For example, the original url path in your html might look like this: <link href="../css/style.css" rel="stylesheet" type="text/css>

After uploading the asset files, your new url path might look something like this (using the actual url of the published funnel):

Note, if you also have references to images in your original css file you will need to either update those references and re-upload the css file or add the new src paths via the css editor in the builder.

It may help to open the original html page in another browser. That way you have a visual to compare the original page to the page in the builder.

Paste your code into the Builder:

Once in the builder, click on the code editor and past your html into the html editor. Paste the code between your <head> tags above our <title> tag. Paste the code between your <body> tags after our <title> tag. Do not include your <head> or <body> tags. The builder adds the head and body tags on its own. Make sure to click “Save” before exiting the code editor.

Save and exit the code editor.

Update your missing images by clicking the empty image elements and uploading the images via the builder Assets Manager. Currently, images need to be uploaded individually. If your design uses different images for desktop and mobile, be sure to update both.

For any hidden sections in your design, you'll need to go to the layer manager and unhide the hidden sections. Then you can edit those elements directly in the builder and hide them again. Alternatively, you can simply update the html directly to edit any image src paths or make other edits.

The sliders and other functional aspects, typically those relying on JavaScript, may also need some tweaks, but it should be minimal. Typically, once the new JavaScript source path is specified, updating images and their css paths will bring the page together. Just make sure to add the new path for any JavaScript files you uploaded.

Keep in mind, hand coded sliders and other JavaScript driven functionality will likely not work as expected inside the builder. You will see those items work as expected on the published page.

Once finished, save the page. Exit the back to the Funnel Visualizer and publish the funnel.

Review the live page for accuracy and any remaining layout or functional issues. Be sure to check the various screen sizes to ensure the page looks and functions as expected across devices.

PreviousDefinition of important onClick functions in the app NextDomain Configuration

Last updated 3 months ago