Embedding custom elements on a page allows you to add third-party elements to your page using a code snippet provided by the element provider. The code snippet is usually a piece of HTML, JavaScript, or a combination of both that you can add to your page to display the custom element.
You can also embed websites, blogs, or any videos using the URL.
Here are the steps to follow to embed a custom element on a page:
> Start by selecting the element you want to embed that best fits your needs. Click on the + icon on the top left is the element palette that contains the Embed widget to add to the page.
> You can choose to Embed a site, HTML or HTML code without an iFrame on your page.
Embed a site: This widget allows you to easily add a website as an embedded widget. It can be controlled like a normal widget and you can customize its appearance and size.
We can embed a website’s URL by choosing the Embed a site option and adding the URL in the pop-up box, and Saving changes. Your URL should appear immediately.
Note: If your website is private and does not load directly on the page, iFrame settings on your domain from your end have to be updated which will allow the link to render on the viewer.
Please contact support@paperflite.com for the iFrame settings.
Embed HTML within iFrame: If you have HTML code that you want to embed, you can use this widget. Simply paste the code, and the result will be rendered within the iFrame.
This means that none of its style or functionality will affect the page outside of the widget. You can resize the widget and use it like a normal widget.
When you want to embed an element like a Custom gif, embed videos, or Calculators, the code editor on Cleverstory allows you to add the HTML, CSS, and JS scripts.
iFrame: The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. It essentially puts another webpage within the parent page.
You can expand the Code Editor tab to easily input your codes to add the element.
Embed HTML without iFrame: If you have HTML code that you want to embed, but you want its style and functionality to affect the entire page, you can use this widget.
If the Width and Height in the iFrame code are more than the value of the Width and height of the widget, then, keep in mind that the UI will bleed out of the widget boundary and cannot be controlled like a normal widget.
Note: Use this widget with caution and only if:
You have a CSS style that has to apply to the whole page.
You have JavaScript that has to affect the entire page.
You can embed HTML elements without the iFrame option using the code editor on Cleverstory to add the HTML, CSS, and JS scripts
Custom elements that you want to build on the page specifically can be done using this Code editor with no external boundary.
Once you are satisfied with the custom element on your page, you can publish your page and make it live. Your custom element should now be displayed on your end URL.
Still have queries? Send them to us at support@paperflite.com and we'll be glad to assist.