Interactions are typically shown on top of the webpage, but it is also possible to position them inside the page. Continue reading to find out how.
Create your interaction
First you need to create your interaction. Pay attention to the size of the base element of your interaction. Then design your interaction on top of that base like you usually would!
To make the interaction fit your page better, especially if your page has some other background color than white, it might be a good idea to have a transparent background (base element) in your interaction. You can do this by ticking off the background color in the Styles tab.
Define the position of the interaction on your website
Now think about where in your webpage you would like the interaction to be shown and select a specific spot for the interaction. You may need to create some space for the interaction, so that it fits the page nicely. Ask your developer to add a new <div> on the page where you want to reserve the space for the interaction, and make sure the div has a specific id e.g “embed-interaction”.
After this it is just a matter of adding the id of the spot that your developer created as the element identifier in giosg Interaction builder. If the id of the element is as in the example:”embed-interaction” the text you need to add as the identifier is: #embed-interaction
Publish the interaction
You can add the id of the place on the space created for the interaction (see above) by clicking the name of the interaction from the top left corner in Interaction builder. In the menu that opens choose “Advanced options”, select “position in-page” and add the id to the field reserved for it. Then click apply.
Finally, publish the interaction on the Publish page in Interaction builder and go admire the result on your webpage!