The Ultimate Toolbox for creating
amazing web sites!

Adding HTML, Javascript or PHP to a web page

WYSIWYG Web Builder is not an HTML editor, which means that the HTML does not exist until you preview or publish the page. Therefor, you cannot directly edit the HTML. However, you can insert custom HTML or scripts to the web pages generated by the software.
Important note:
When incorporating custom HTML or scripts, it is crucial to have a solid understanding of what you're doing. Adding erroneous code or placing it in the wrong section of the page can disrupt the HTML structure and lead to a multitude of errors on the page.

In most cases, any code that functions correctly in another editor will perform equally well in WYSIWYG Web Builder since it's inserted "AS IS." However, if the code is incomplete or improperly inserted, it might not function as intended.

HTML object

The most common way to insert HTML into a web page is by using the HTML object. You can use this to add counters, ads, banners or javascripts. Select Insert -> HTML to add the HTML object to your page. Double click the object to edit its properties. Now you can enter a description of the HTML (so you can identify the code later) and the HTML code. WYSIWYG Web Builder will automatically add position information to the HTML so the counter, ad, banner etc will be displayed in the position of the HTML object. It's also possible to use the HTML object to insert code inside the <head> tag or at the start/end of the page/body by selecting another Type. See the help for more details about that.
HTML Object

Page HTML

This method should be used if you want to insert HTML in the <head> or <body> tags of the page.
From the menu select Page -> Page HTML to display the Page HTML window.
In this window the HTML generated by Web Builder is displayed. To insert your own code, select the appropriate Tab. Select if the code should be inserted at the Start of Page, Between Head tag, Inside Body tag, Beginning of Body, End of body or end of page.

Add HTML to an object

It's also possible to insert custom HTML for a specific element, so you can for example add an extra attribute.
From the menu select Edit -> HTML to display the Object HTML window.
In this window the HTML generated by the software is displayed. To insert your own code, select the appropriate Tab. Select if the code should be inserted at the Start of Page, Between Head tag, Inside Body tag, Beginning of Body, End of body or end of page. There is also an option to insert custom style attributes.
by the software.
Note:
When you insert code in the Page HTML window, make sure you DO NOT include the <!DOCTYPE>, <html>, <head> or <body> tags! These tags (for the HTML page structure) are already generated by WYSIWYG Web Builder.
In general, we do not provide support for custom code or custom scripts. By that we mean code/script that was not created by the WYSIWYG Web Builder. We assume that if a user wants to use JavaScript, PHP, ASP or any other scripting language, he/she has the necessary programming skills to manage his/her scripts. The tools we provide are meant only for advanced users and for users who are knowledgeable enough to manage their scripts using those tools.

If you have limited experience or knowledge about scripting and troubleshooting custom code, we strongly recommend that you look into hiring a web developer to assist you. We can only support code that was generated by the software.

Artificial Intelligence

WYSIWYG Web Builder has built-in support for AI Code Generation. You can utilize AI functionality within HTML objects, Object HTML, and Page HTML. This includes adding scripts, HTML, CSS, PHP, and more, making it a useful tool for developers.
To learn more about the built-in AI functionality, please see this related tutorial: Getting started with AI

Include external files

Sometimes you may need to include external files to the added custom code. For example, external script libraries (*.js) or style sheets (*.css). You can attach those files to the page with the File Publisher object. The File Publisher object will be published all selected files together with the current page.

When the code you have inserted does not work then keep in mind that WYSIWYG Web Builder does not change the inserted code in any way! The HTML will be inserted and published  "AS IS".


Common reasons for code not working are:

Trouble Shooting


Start of Page
The HTML will be inserted before all other code on the page.
Note that this section is mainly for adding server side code lie PHP. There should not be HTML or JavaScript code in this section!
Between <head></head> tags
The HTML will be inserted between the <head></head> tags.
<-- your html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" target="_blank" class="weblink">http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Inside <body> tag
The HTML will be inserted inside the <body> tags. This section is for adding HTML attributes only, not for scripts!
<head>
...
<-- your html -->
</head>
Before </body>
The HTML will be inserted right before the closing </body), at the end of the page.
<body attribute=value>
After <body> tag
The HTML will be inserted after the <body> tags.
<body>
<-- your html -->

...
</body>
End of page
The HTML will be inserted at the end of the page, after the <body> tag.
<body>
...

<-- your html -->
</body>
<html attribute=value>
<body>
...
</body>
<-- your html -->
Inside <html> tag
The HTML will be inserted inside the <html> tags. This section is for adding HTML attributes only, not for scripts!
Do not use <div>
Select this option to insert the HTML code “AS IS”, without size and position information.
Use <div> to set position and size of the HTML
Select this option to insert the HTML code inside a DIV container with size and position information added by WYSIWYG Web Builder.
<div style:left:100px;top:100px;width:200px;height:200px;position:absolute">
<-- your html -->
</div>
Start of Page
The HTML will be inserted before all other code on the page.
Note that this section is mainly for adding server side code lie PHP. There should not be HTML or JavaScript code in this section!
<-- your html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" target="_blank" class="weblink">http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Start of Page
The HTML will be inserted before all other code on the page.
<-- your html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" target="_blank" class="weblink">http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Between <head></head> tags
The HTML will be inserted between the <head></head> tags.
<head>
...
<-- your html -->
</head>
Inside <body> tag
The HTML will be inserted inside the <body> tags. This section is for adding HTML attributes only, not for scripts!
<body attribute=value>
After <body> tag
The HTML will be inserted after the <body> tags.
<body>
<-- your html -->

...
</body>
Before </body>
The HTML will be inserted right before the closing </body), at the end of the page.
<body>
...

<-- your html -->
</body>
End of page
The HTML will be inserted at the end of the page, after the <body> tag.
<body>
...
</body>
<-- your html -->
Inside <html> tag
The HTML will be inserted inside the <html> tags. This section is for adding HTML attributes only, not for scripts!
<html attribute=value>
CSS in media query
This option makes it possible to add breakpoint specific CSS styles. This can be useful if you need different styles in breakpoints.

Related Tutorials

How to use PHP to collect Form data?
Building a PHP Shopping Cart
Create a 3D Carousel with reveal.js
Using the jQuery Slider
How to create a draggable window using layers?
Importing an existing HTML page in to Web Builder