This guide will explain to you how the Embedded Html block works and how it can be used in your content pages.

The embedded HTML block is a useful tool for including custom code and content within your web page. It allows you to integrate external web content, embed code from other sources, and execute external JavaScript. Here are some practical examples of how to use it:

Rendering an External Web Page within Your Content Page:

You can use the embedded HTML block to display an entire external web page within your content page. This can be handy when you want to provide context or share content from another website without redirecting users away from your site. Here's an example using an iframe:

<iframe src="https://www.example.com" width="800" height="600"></iframe>

In this example, the external webpage from "https://www.example.com" will be embedded within your page, and users can interact with it without leaving your site.

Embedding Code from an External Source:

Sometimes, you may want to include code snippets or widgets from external sources like social media platforms or other services. For instance, embedding a Twitter tweet:

<blockquote class="twitter-tweet">
      <a href="https://twitter.com/TwitterUser/status/123456789">Check out this tweet!</a>
   </blockquote>
   <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

In this example, the <blockquote> element contains the embedded tweet, and the accompanying <script> loads the necessary Twitter widget.
You can get the embed code from the source website that supports embedding.

Running External JavaScript within Your Page:

You can also use the embedded HTML block to run external JavaScript code within your web page. For example, integrating a third-party analytics script:

<script src="https://analytics.example.com/track.js"></script>

This script will execute on your page, allowing you to track user interactions or gather data from your website.

Remember to exercise caution when embedding external content and code, especially when it comes to security and user privacy. Make sure you trust the source of the code you're embedding, and be aware of potential security risks associated with third-party scripts. Additionally, consider the impact on the user experience, as excessive external content can slow down your page's loading times.

Updated on: 20/06/2024