Embedding Options In Outgrow

Outgrow offers multiple embed options using which you can promote your content piece as a part of your website. This document showcases how each of these embeding options can be used in a unique way.

Accessing the embed code in Outgrow dashboard

Log in to your Outgrow dashboard and select a content piece that you want to embed on your website. Once you are in the builder, you need to navigate to the Configure tab. Now click on the Embed On A Webpage sub-tab. Once you are in this section, the below-mentioned options will be available for you:

A. Full Page Embed
B. In-Page Embed
C. Popup Style Embed
D. Timed Pop Up
E. Exit Intent Pop Up
F. Chat Messenger Style Embed
G. Custom Embed Functionality
H. Floating Rectangle Style Embed
I. Greet Bar Style Embed
J. Sidenote Style Embed
K. Instant Article/AMP

Full Page Embed Type

In the case of a Full-Page embed, your Outgrow content can be displayed on your website without having any distractions such as sidebars, etc. for the users. You can use your header, and footer and have the content inside the two.

In the example below, the white header with the organization's logo is actually the header of the parent website and the calculator is embedded in an end to end container.

NOTE: On a mobile device you will see a screenshot of the Welcome page, and when you will click on it, the content will load and take over the whole screen.

In-Page Embed

If you want other website elements to also be present on the page, then you can opt for In-Page embed. The content will be placed within a container, and when you will click on the start button, the content will load within the part of the page where the embed code has been embedded.

In the example below, a calculator has been embedded inside of a blog post.

Pop Up Type Embed

You can now configure an embed to show as a Pop-Up, when a trigger button is clicked on. You can choose out of Classic, Drawer Left or Drawer Right.

NOTE: You can edit the button text, button text color, font size, font color etc, using the button editor.

Timed & Exit Intent Style Pop Up

In the case of Pop Up embed, you can toggle on the feature for Times & Exit Intent pop up. In case of Timed Pop-Up you can control that after how many seconds will the pop will appear. Also, in case of Exit Intent, you can set it up that when the user is about to close out of the tab, the content piece pops up.

NOTE: The button that needs to be clicked on manually to open the content piece will always appear on the screen. But the content piece will open up automatically depending on the setting that you choose.

Chat Messenger Style Embed Type

You can now make a content piece appear on the screen as a chat notification. You can customize the subject of the chat pop up that appears on the screen, and you can also customize the chat icon color as well.

NOTE: This embed option can be used with any content type.

Custom Embed Type

In case you want to embed your Outgrow content in an iFrame that is of a specific width and height, you should go for this option. You can also specify a different iFrame height and width for each device type as per your requirements.

Greet Bar Style Embed Type

Greet Bar styled embed is used when you want to place the content piece at the top of your website's page. You can customize the Bar Text, BG Color, Text Color, Font Size, Button Text, Button Color for the greet bar.

NOTE: When you opt for a Greet Bar style embed, you have the option to either have the embedded content piece open in a new tab or have the embedded content open up as a pop-up. Depending on the option that you choose the embed code will automatically get updated.

Floating Rectangle Style Embed Type

You can opt to have the content embedded on your website's page as a floating rectangle. When the user will click on rectangle, the content piece will open in the rectangle itself. For the rectangle, you can customize the Heading Text Color, BG Color, Font Size, Help Text, Help Text Color, etc.

NOTE: You can choose between Center, Left or Right aligning the rectangle on the page.

Sidenote Style Embed Type

This embed type can be used when you want to add a placeholder on the side of the page, which when clicked upon will open the embedded content in a pop-up. You can choose between placing the placeholder on the left or the right side of the page.

Facebook Instant Article/AMP

A. Facebook Instant Article: Using this embed type, you can embed your Outgrow content in a Facebook Instant Article. Facebook Instant Articles are the ones that have a lightning bolt at the top right of the image as shown in the illustration below.

B. Google AMP: Using this embed type, you can embed your Outgrow content to a Google AMP. Google AMP is an open-source HTML framework that was originally created to compete with Facebook Instant Articles.

Feel free to reach out to us at [email protected] and we will be more than happy to assist you further.

📘

Important Note

Ensuring Responsiveness on Full Page Embeds

While pasting the code in an empty HTML page, users often forget to add an important tag in the header that ensures responsiveness. Please make sure that this tag exists in the header of the HTML page where you are creating your full page embed.