1. Introduction.
By enabling the option to use custom HTML (which must be done independently for each type of screen), all the default customizations of the page are eliminated, being able to include the individual elements that compose the campaign and that we detailed in the tutorial Advanced customization with own HTML.
A basic structure of HTML elements is maintained along with a basic CSS file, which controls the operation of the following common elements in all campaigns: login popups, legal bases, campaign sharing, and alert messages.
2. Step by step.
By activating your own HTML, our platform allows you to customize the content and elements you need for your campaign, as well as to load external libraries such as the Bootstrap Framework.
To include this library you must insert, on the one hand, the link to load the CSS after the code <!-- {{{ cool_tabs_head }}} --> and before the closing </head> tag and, on the other hand, load the JavaScript of the same before the <!-- {{{ cool_tabs_body_body_end }}} -->
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{ cool_tabs_head }}} -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body {{{ cool_tabs_body_attributes }}} >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
You can include the elements you need using our {{handlebars}} system and customize them with your own CSS (or SCSS if you prefer).
On the Form page, you can also activate the 'Include some basic CSS in the form page' option to load the CSS of our campaigns. This way, you will get our default quiz and form customization.
In summary, if you want to load the Bootstrap framework, you must include it in all the screens where you want to use it, except in the Form screen, since it is loaded by default, as long as you choose the option Include basic CSS in the form screen.
3. Other specifications.
If you have any doubts, you can contact us at help@cool-tabs.com.
4. Related content.
Advanced customization with your own HTML.
How to configure custom CSS for your campaign.
Comments
0 comments
Please sign in to leave a comment.