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):
<link href="https://funnels.thisisatestsiteonly.com/02455854-dac8-4e8f-8fbb-7765a38ef441/style.css" rel="stylesheet" type="text/css">
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.
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.
Last updated