Embedding External HTML and Images into Webpage on Appmint

Leveraging external HTML and images within your Appmint pages gives you more flexibility and control over specific elements.

You can easily enhance the functionality and visual appeal of that element eg form, carousel, texts, etc, or add complete template code for a web page like a home page, pricing page, etc.

Understanding External HTML

External HTML refers to code, video, embedding codes, webhooks, and images hosted outside of Appmint's editor. eg Tailwind codes, Google Maps, YouTube videos, Social media feeds, Live Chat Support, etc

This approach can be beneficial for creating

• Complex Functionality: Embed elements built with other tools like forms, maps, or custom widgets.
• Reusable Components: Maintain a single source for frequently used HTML snippets across multiple pages as you have the ability to save the external codes & images as a reusable component.
• Dynamic Content: Integrate content managed in external systems using an iframe.

The major advantage is to add features not natively available within Appmint.

With Appmint HTML widget, you can easily utilize pre-built widgets, functionalities, or custom elements created by other external providers that offer an embeddable HTML code snippet.

Let's say you want to display a dynamic weather widget on your website. You only need to copy the HTML code snippet provided by the widget provider.

Also, imagine you have a complex form or pricing system built with a separate form builder tool. or a component code like Tailwind.

Building with Appmint HTML widget

Learn how to add HTML code to the Appmint webpage directly.

Make sure you're logged into the Appmint editor panel and click on "Preset" in the editor dashboard.

Drag and drop the "HTML" widget* onto your page canvas.

Close the preset menu and select the HTML widget to add your code to the snippet field.

Export or copy the HTML code** from your tool or an external website.

This will typically involve copying the code snippet into the HTML widget by clicking on the Öpen Code View" icon and pasting the code into the code editor.

For example, if you have a Tailwind HTML code, social feed code, Google map, any embedded code, etc, that you would like to add to your website, you only need to copy and paste the code inside the HTML widget and save it to display it.

Click "Save" to integrate the external HTML into your page, you will immediately see the preview of the code on the page.

Adjust the size and position* of the embed element within your Appmint page layout.

Using an iFrame (For Dynamic Content)

An iFrame (inline frame) allows you to embed a dynamic web page or content from another website directly into your Appmint page.

This is useful when you want to display content that's constantly changing or managed by a different system.

Example Use Case

Imagine you want to integrate a live chat functionality on your website but don't want to build it from scratch.

A live chat service provider might offer an embed code that includes an iFrame. By incorporating this iFrame using Appmint Iframe you can seamlessly add the live chat functionality to your Appmint page.

Visitors can then interact with your chat support directly through the embedded window.

Display live feeds, social media posts, -Third-Party Integrations: Embed functionalities from external services like chatbots, appointment schedulers, or custom tools.

• Content Management Flexibility: Integrate content managed in separate systems without needing to rebuild it within Appmint.

** Here is how to embed iFrame for Dynamic Content on a webpage in Appmint**

An iframe, short for "inline frame," is an HTML element used to embed another document within the current HTML document.

It allows you to display content from another URL or document seamlessly within your webpage.

Here is how to integrate iframe on a webpage on Appmint

Make sure you're signed into the Appmint editor panel.

Locate the source URL of the dynamic content you want to display.

Drag and drop the "Embed" element onto your page.

Choose the "iFrame" option within the embed settings.

Paste the source URL into the "Source" field.

(Optional) Adjust width, height, and scrolling behavior as needed.

Click "Save" to display the dynamic content within your page.

Integrating External Images

External images are images on another website that you want to add to your website which you do by either uploading the file to your website file folder or integrating with the image address link.

Here is how to integrate external images on a webpage on Appmint

Make sure you're signed into the Appmint editor panel.

Select an element above or below where you want to insert the image. Then go ahead to select the "Add Item" icon, and select the position where you want to insert your image.

Immediately the item panel will show on your webpage, then you scroll to select the image element and it will show up on your editor.

Locate the URL of the image you want to insert and copy the image address.

Select the image element, and then select the stylemint icon, then go to the image URL to insert your image link.

Immediately your image will be inserted, then go ahead to save your new update.

Adjust the image size and position using the element's settings.to fit your needs.

Important considerations when using external HTML codes:

• Security: Ensure external sources are trustworthy to avoid security vulnerabilities.
• Performance: External content can impact website loading speed. Use it judiciously.
• Responsiveness: Verify that external elements adapt appropriately to different screen sizes.

By following these guidelines, you can effectively leverage external HTML and images to enhance the functionality and design of your Appmint websites.

Happy building with Appmint!