Add an HTML Block

Add an HTML Block

Note: This article provides steps for code provided by third-party sources. Any troubleshooting with third-party applications should be handled by the application’s support team or your custom developer. 

 

You can integrate third-party widgets or applications on your website by adding an HTML block and pasting in the embed code.

 

Add an HTML block

To create an HTML block:

  1. Select the Pages tab at the top of your Websites app.
  2. Select the page you want to embed the custom HTML.
  3. Select the (+) button at the bottom of the page or in between the content blocks, where you'd like to add the HTML block.


  4. Select HTML from the menu that appears.


  5. Paste the code you want to embed into the new content block you have created, inside the text area circled in the screenshot below.
    Note: if you paste it incorrectly, you will be notified at the bottom of the block in red.


  6. After you paste your code into the code box, select the blue Save button.

Once you are ready, click Publish in the top-right corner of the publish the HTML block contents on your live website.

 

HTML block errors

Any HTML inserted into an HTML block must be valid HTML code. If your code isn't valid, then you may not have the option to click the Save button at the top of the block.

Below is an example of invalid HTML:

Notice how the first error says there isn't a start to the tag. If you take a look at the highlighted tag (shown in the screenshot above), you will see that there is a spelling mistake, the tag has an extra "y" letter before the end of it.

Here are some errors you may see, and their cause:

If you see this 'warning' symbol: The triangular ! symbol indicates that the HTML code you inputted should be revised for better validity. The red error notes at the bottom of the block may suggest what you should do to make your code valid. The save button will illuminate blue and allow saves with HTML warnings, unlike with HTML errors.
If you see this 'error' symbol: The squared symbol indicates that the HTML code you inputted is not valid and should be reviewed in order to make it valid. The red error notes at the bottom of the block may suggest what you should do to make your code valid. The save button will not illuminate blue to allow saves with HTML errors in the block.

 

Note: Sometimes, you may see the red X symbols, but are still allowed to click the Save button. If this happens, click Save and view the page to see if your widget/application is working successfully. If so, then you can disregard any red X symbols on the HTML block.

    • Related Articles

    • Connect Third-Party Apps to Your Website

      You can connect to third-party services that enable you to push or pull content to and from your website. To add third-party apps to your website: Navigate to the Settings tab on your Websites app. Select Apps on the left-hand sidebar. Click the Add ...
    • Embed a Google Calendar on Websites 360®

      You can share your Google Calendar with your website visitors by embedding an interactive calendar to your website. Visitors can click and save your public calendar events. Note: The function of the Google Calendar is dependent upon third-party code, ...
    • Add Google AdWords Code to Websites 360®

      You can add a Google AdWords Remarketing code to your website by adding it in your Apps dashboard and adding some code to your Footer. Set up the AdWords app Navigate to your Websites app and select the Settings tab at the top of the page. Select ...
    • Add a Jotform to Websites 360®

      To add a custom form to your website built with Jotform, a third party service you can integrate into your pages, first go to jotform.com and click "Sign Up" in the top righthand corner. In Jotform, navigate to the My Forms panel, select the orange ...
    • Add an Instagram Feed to Your Website

      Are you looking to add an Instagram Feed to your website? If so, you will want to use a third-party social feed widget. You can embed these on your Websites 360® site using an HTML block: Find a third-party social feed widget Embed your Instagram ...