Add custom HTML

Caution

Custom HTML is an expert function and can have undesirable effects on your website's design and functionality. Additionally, it may have negative effects on the responsive design of your website.

Carefully review your website after any changes with this function have been made. Please also note that automatically applied system updates for your website may affect your custom HTML code. Therefore, regularly check whether the HTML code you entered still fulfills its purpose and whether the design or functionality has been affected by an update.

HTML is a markup language that is mainly used to create web pages. In the Editor within your cockpit you can add your own HTML to your website. Among other use cases, this offers you the following options:

• Embedding widgets, such as appointment scheduling widgets
• Embedding trust seals
• Embedding iFrames
• Integrating social media feeds
• Inserting tables, buttons, and other elements

How to add custom HTML

Note

You can only add custom HTML to the content pages of your website. It is not possible to add custom HTML to legal or checkout pages.

1. In the sidebar of your cockpit, navigate to Editor.
2. You will see a list of your pages in the sidebar under Pages > Content pages. Select the page to which you'd like to add the custom HTML.
   A preview of that page will now be shown on the right-hand side.
3. In the sidebar of the Editor, select Content elements. You will now see a list of the available content elements.
4. Select the Custom HTML content element and drag and drop it to your desired position.

   Note

   You can only drop the element in the blue areas of the page.
5. Select Add HTML.
6. Add your custom HTML code. The website software automatically checks if the HTML code you entered follows the rules for HTML.
7. Select Save.

The HTML is now applied to the specific content page of your website. Nevertheless, we advise you to take a few minutes to go through your whole website and check if everything is displayed correctly.

How it looks like

Of course, the content and the layout of your custom HTML is totally up to you and depends on the code you added. Still, we can give you some general information on how it will look like:

• The HTML code itself will not be displayed on your website. Only the visual output that is generated by the inserted code will be displayed.
• The output is only displayed on the specific content page to which you've added the code.
• The exact location of your HTML depends on the code you've added. In general, you have two options: 
  • Adding HTML code that creates a visual output displayed within the content element area.
  • Adding HTML code that creates a visual output displayed outside the content element area.
• A grey info box will always be displayed in the area to which you dragged and dropped the content element:
  
  This info box as well as the space that is occupied by this box in the Editor won't be displayed on your website. So you don't need to be afraid of an empty white space that is displayed on your website instead of the box.

How to edit custom HTML

We'd like to make life easy for you when it comes to editing custom HTML. That's why a grey info box is placed at the location to which you dragged and dropped the content element. Depending on your inserted HTML code, the related visual output is located right above the info box or somewhere else on the page.

For both options, the info box supports you detecting the location of your custom HTML content element. It is especially helpful for custom HTML that is displayed outside the content element area. So you don't need to search for the visual output of the code on the page in order to edit it. Instead, you'll find the edit option always at the same place right next to the info box.

1. In the sidebar of your cockpit, navigate to Editor.
2. You will see a list of your pages in the sidebar under Pages > Content pages. Select the page that includes the custom HTML you'd like to edit.
3. If necessary, scroll down until you see the Custom HTML content element. You will either see the grey info box or the output with a grey info box below as seen here:
   
4. Navigate to the content element so that the  icon appears in the upper right corner.
5. Select .
6. Edit the custom HTML code according to your needs.
7. Select Save.

The code changes are now applied to your website. We advise you to take a few minutes to go through your whole website and check if everything is still displayed correctly.