The embed code that you get after publishing a project allows you to add your involve.me project to any page of choice on your website. With involve.me you have several options when it comes to sharing your project - with one of them being as a popup.
The embed code can be found on the "Share your Project" screen, which is shown right after the project has been published, and it can also be accessed anytime from the Project Overview.
When on the "Embed your project" page, you'll have several embed customization options to choose from.
Type
There are several embed types, but in this article we will only focus on the pop-up ones. For more info about about the standard and fullscreen types, check the articles here and here, respectively.
Popup
Your project will be shown as a normal popup. How you wish for the popup to show will be up to how you decide to customize it.
Chat Button
This option will create a chat button that will be placed in the bottom right corner of your website's page, which once clicked, will show your project as a popup.
Side Panel
Here, your project will slide in either from the right or the left.
Side Tab
Selecting this option will add a side tab to your website's page, which can be placed either on the left or the right. Clicking this tab will open your project and with a slide-in animation.
Customization
These are the customization options available for popup type embeds:
Show Popup
In this section you can choose how the popup will be shown to users.
On button click: Users will need to click a button in order for the pop-up to open, as shown on the example below with the button saying "Launch popup". You can change the button's text as well.
The button itself is not embedded, instead it is an HTML element in your website. For this reason, it is not possible to control its appearance from the involve.me interface, but you can customize the button with CSS in one of the following ways:
Add a style attribute with any CSS you want.
Or add global CSS on the website for the .involveme_popup which is the class name of the button.
Make sure to not remove anything from the embed code, as everything that is included in it is necessary in order to the embed to work.
On exit intent: This will make it so that the popup opens if the user tries to navigate away from the page they're currently in (does not work for mobile).
On page load: The popup will open once the page has loaded.
After time delay: The popup will open after a certain amount of time has passed. You also have the option to choose how many seconds this delay should have.
Popup Size
In this section, you can choose from four possible predefined popup sizes:
Large
Medium
Small
Mini
Icon (Only for: Chat Button and Side Tab)
You can chose from a variety of icons that are readily available, you can also change the button color, and in the Side Tab's case, change the text.
Close Popup on Completion
This feature is only available on the Pro plan or higher, and it allows you to set the embed to close automatically after the user has reached the end of your project. You can also set a time delay for the popup to close. In the example below, the popup is set to close 5 seconds after the user has finished the project.
Stop Showing Once Completed
If you want the embed to stop showing after a participant has completed it, then this is a great feature. You can also chose the duration of this effect. This feature is only for the Pro plan or higher.
Bear in mind that this option does not work with with Standard or Full-page embed types, nor when the popup is set to show "on button click".
Loading Background Color
You can change the color of your project's loading background to any of your liking. This is a great way to make the loading background color to match your project's or even for the project to seamlessly integrate into your website.
Unable to Use the Popup Option
If by any chance you're not able to use our popup option, other alternatives include:
Using the embed code of your involve.me project and adding it inside your own pop-up.
Most website builders have pop-ups natively, or you can install plugins for pop-ups. Then you can add the code as content of the pop-up, if inserting HTML/JavaScript code is a possibility.