Guide: Embedding (inserting) your Pressroom on your website

Integrating your Pressroom into your own website allows visitors to stay informed with the latest news while keeping them engaged on your platform. Follow this step-by-step guide to seamlessly embed your Pressroom.

If you need help integrating your Pressroom, please contact NewsMachine support at support@newsmachine.com

Embedding Your Pressroom on a Standard Website

Step 1: Copy the embed code

Below is an example of the HTML code needed to embed the pressroom into your website. Simply copy and paste this code into the desired location within your website. Be sure to replace the src-URL with your organization’s registered name on Newsmachine.

Example: https://newsmachine.pmembedded.newsmachine.com/.

If you have your own subdomain (CNAME) registered with Newsmachine, you can also use that.

For example: src="https://subdomän.dindomän.com/".

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
      #pressFrame {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      #pressFrame::-webkit-scrollbar {
        display: none;
      }
    </style>

</head>
 
<body>
    <iframe
      id="pressFrame"
      src="https://pressroom.newsmachine.com/"
      width="100%"
      height="1500"
      frameborder="0"
      allowfullscreen> 
    </iframe>
    
    <script>
      function resize_frame(e) {
        if (e.origin === "https://pressroom.newsmachine.com") {
          var data = JSON.parse(e.data);
          if (data["height"]) {
            $("#pressFrame").css("height", data["height"] + 1);
          }
        }
      }
      if (window.addEventListener) {
        window.addEventListener("message", resize_frame);
      } else if (window.attachEvent) {
        window.attachEvent("onmessage", resize_frame, false);
      }
    </script>
</body>

Step 2: Customize the embed

Width & Height: Adjust the <iframe> attributes for optimal display.
CSS styling: Customize the look to match your website design. Log in to your Newsmachine account, navigate to Press releases in the main menu, then click on Press Room in the submenu and scroll down to the CSS editor.
Once you have made the necessary adjustments, click Save.

Step 3: Test the integration

Visit your website to check that the pressroom loads correctly. Test different screen sizes to ensure responsiveness and proper resizing.

How to embed your Press room on your WordPress site

There are a few different ways to embed your newsroom on your website depending on which editor (in WordPress) you use. Here’s how to do it with the most common editors:

1. Insert an iframe in the Gutenberg Block Editor

If you are using the new WordPress Block Editor (Gutenberg), follow these steps:

Open the page or post where you want to insert the iframe.
Click on the block inserter (+) icon to add a new block.
Search for Custom HTML and select it.
In the Custom HTML block, paste your iframe code.

Here is an example of the code:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

You can preview by clicking on the Preview button above the block.
Customize the code by adjusting the width and height to fit your design.

Example with additional customization:

Example: https://newsmachine.pmembedded.newsmachine.com/.

If you have your own subdomain(CNAME) registered with Newsmachine, you can also use that.

For example: src="https://subdomän.dindomän.com/".

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #pressFrame { 
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #pressFrame::-webkit-scrollbar { display: none; }
    </style>
</head>
<body>
    <iframe id="pressFrame" src="https://pressroom.newsmachine.com/" width="100%" height="1500" frameborder="0" allowfullscreen></iframe>
    <script>
        function resize_frame(e) {
            if (e.origin === 'https://pressroom.newsmachine.com') {
                var data = JSON.parse(e.data);
                if (data['height']) {
                    $('#pressFrame').css('height', (data['height'] + 1));
                }
            }
        }
        if (window.addEventListener) {
            window.addEventListener('message', resize_frame);
        } else if (window.attachEvent) {
            window.attachEvent('onmessage', resize_frame, false);
        }
    </script>
</body>

2. Insert an iframe in the Classic Editor

If you use the Classic Editor (or a plugin that provides the old editor):

Go to the page or post editor.
Switch from Visual mode to Text mode (HTML).

Paste your iframe code where you want it.

Example:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

Switch back to Visual mode to see the placement (though you won’t see the actual iframe unless you preview the page or post).
Update or publish the post.

3. Using a Shortcode Plugin

If you are restricted from adding HTML or use certain themes, you can use a plugin to insert the iframe.

Install and activate a plugin like Shortcoder or Iframe Embedder.
Once activated, you can create shortcodes to wrap the iframe code or use widgets to embed it without editing the HTML.

4. Insert an iframe with Elementor

If you use Elementor, you can easily add an iframe.

Method 1: Using the HTML widget

Open the page or post in Elementor where you want to add the iframe in Elementor.
Click on Edit with Elementor.
Search for the HTML widget in the left panel.
Drag and drop the HTML widget to the desired section.

Paste your iframe code, e.g.:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

You see the iframe content directly in Elementor.

Method 2: Using Elementor Shortcodes

Search for the Shortcode widget.
Drag the widget to the desired section.
Add the iframe code to the shortcode field if your website supports it.

5. Insert an iframe with Divi Editor

Method 1: Using the Code Module

Divi provides a Code Module that allows you to insert custom HTML, JavaScript, and CSS, including iframes.

Open the page or post in Divi.
Click on “Edit with Divi Builder”.
Select Code Module from the list.

Paste your iframe code:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

The iframe content will be displayed directly in the module.

Method 2: Using the Text Module

If you want to insert an iframe in text, you can use the Text module.

Click on + button to add a Text Module.
Switch to Text mode and paste the iframe code.
Switch back to Visual mode to preview.

Customize the embed

Width & Height: Adjust the <iframe> attributes for optimal display.
CSS styling: Customize the look to match your website design. Log in to your Newsmachine account, navigate to Press releases in the main menu, then click on Press Room in the submenu and scroll down to the CSS editor.
Once you have made the necessary adjustments, click Save.

Test the integration

Visit your website to check that the pressroom loads correctly. Test different screen sizes to ensure responsiveness and proper resizing.

Extra tips

1. Responsive iframe in Divi

To ensure that the iframe is responsive, you can add custom CSS in Divi Advanced > Custom CSS or Divi Theme Options > Custom CSS.

2. Iframe blocking

Some themes and plugins may block iframe for security reasons. If you have problems, you can:

Adjust the security settings.
Use a plugin that supports iframe embedding.

Tags: