Outgrow offers multiple embed options using which you can promote your Outgrow Content piece as a part of your website. This document showcases how each of these embed options can be used in a unique way.
Post-logging into your Outgrow builder dashboard, you need to navigate to the Configure tab and then you need to go to Embed On A Webpage sub-tab. Once you are in this section, below-mentioned options will be available for you, and we will go over these options one by one in the following sections:
A. Full Page Embed
B. In-Page Embed
C. Pop Up 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
You can copy the embed code at the bottom of the page in each respective embed type tab.
In the case of 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, footer and have the calculator 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.
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.
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.
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.
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.
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 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 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.
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.
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.
Feel free to reach out to us at [email protected] and we will be more than happy to assist you further.
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.
Updated 8 months ago