Elements and Widgets

Embed

5min



Embed is a widget that is used to add an additional code on a web page.

Document image


When creating a website, custom code embedding expands website’s possibilities and gives you freedom in managing its functionality and styles. 

With Embed widget you can:

  • Add extra functionality to a website
  • Apply additional styles
  • Integrate third-party services (for example, YouTube video)

Custom code embedding

To embed a custom code:

  • Add the Embed widget from the Elements panel to the page by dragging it to the desired position or by clicking on its name.
  • Double click on the widget on the Canvas.
  • In the Code editor window, type a code or copy and paste a code template.
Document image

  • Click on the Save button and close the window.

For convenience, the lines in the Code editor are automatically numbered.

Custom code is not validated, so incorrect code can cause problems to the published project.



The widget block with the code embedded in it appears on the Canvas in page edit mode and when previewed. However, code execution results can only be seen when the project is published.

Document image


If needed, you can place several Embed widgets on a page. 



Third-party services integration

To integrate third-party content, such as a YouTube video, you can copy the code from the service’s website (usually iframe) and paste it into the Code editor.



Code style rules

The widget supports HTML, CSS, and JavaScript-based codes. You cannot embed a code created with server programming languages (for example, Perl, PHP, Python, Ruby).

  • Use <style> for a CSS code
  • Use <script> for JavaScript code
  • Don't forget to use closing tags. To simplify the work in the Code editor, closing tags  are used automatically
  • Do not use <html>, <body>, and <head> tags in a custom code



Updated 05 Oct 2023
Did this page help you?