Display a Joomla Article In a Popup

In this tutorial, we will demonstrate three methods for displaying a Joomla article in a popup using our Joomla popup builder, EngageBox.

There are a few potential benefits to displaying a Joomla article in a popup:

• Popups can draw attention to important information or calls to action.
• Popups can present information in a visually appealing way.
• Popups can encourage engagement from readers.
• Popups can reduce bounce rate by keeping visitors on the website longer.

Let's dive into the available methods.

Use the Built-in {article} Smart Tag (Recommended)

The first method involves using the built-in Smart Tag {article}. This is the recommended method, as it allows you to easily insert the article into the popup content by simply including the article's ID in the Smart Tag.

To load the text of the article with ID #3, place the following shortcode in the popup’s content:

{article.introtext --id=3}

If you want to print just the title, use:

{article.title --id=3}

You can even render a custom field value by providing the alias of the custom field. For instance, if you have a custom field called "address", use the syntax below:

{article.field.address --id=3}

If the popup is going to be displayed only on the article in question, you can skip the –id option and use just:

{article.title}

Use an iFrame

The second method involves loading the article's URL in an iframe. This allows you to display the article within the popup, but it may not provide the most seamless integration.

In Joomla, you can append the tmpl=component query parameter to almost any URL on your site, and see only the output of the component currently rendered. For instance, if you use that parameter in a URL where a Joomla article is published, you will only see the article’s content without the surrounding modules, headers, footer e.t.c.

Let’s say you want to display in a popup the article published on the URL below:

https://www.site.com/my-article

Add an iframe element to your popup’s content and set its src property to the following URL:

https://www.site.com/my-article?tmpl=component

The final HTML will look like this:

<iframe src="/https://www.site.com/my-article?tmpl=component"></iframe>

Use Articles Anywhere Plugin

This method involves using a 3rd party plugin called Articles Anywhere. This plugin allows you to insert articles into various locations on your website, including within the content of a popup.

To render the content of the article with ID #3, place the following shortcode in the popup’s content.

{article id="3"}[text]{/article}