Custom Popup Button

You can use a custom button or link to launch a calculator or quiz as a pop up on your webpage.

1. Pick the launch code

Click on the "Configure" tab in the builder and go to the "Embed on a webpage" section on the left navigation. Configure your popup trigger and select the "Popup" option.

Fetch the Pop up codeFetch the Pop up code

Fetch the Pop up code

  • Edit the code

Your code will look like this

<div>
  <div id='5a24d0da31cfb06c1642030f' data-isLDrawer='false' data-embedBorderRadius='0' data-embedFontSize='12' data-textcolor='#ffffff' data-bgcolor='#fb545b' data-prop='outgrow-d' data-type='outgrow-b' data-url='https://democo.outgrow.us/5a24d0da31cfb06c1642030f' data-text='Get Started'>
  </div>
  <script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/ploader.js'></script><script>initIframe('5a24d0da31cfb06c1642030f');</script>
</div>

For following style

Font: Quicksand Bold
Font size: 18 px
Text colour: 3DBEBF
Underlay colour: FFFFFF
Button size: W 300, H 50
Corner radius: 10

Add following code after the second div of the pop-up code

<style>.outgrow-b{ width:278px !important; float:left  !important   ; height:38px !important   ; line-height:normal !important   ; text-align:center !important   ; color:#3DBEBF !important;}.color-1 .outgrow-b:hover{color:#3DBEBF !important; background:rgba(245,245,245,1);}.color-1 .outgrow-b{color:#3DBEBF !important;}@media only screen and (max-width: 600px){.outgrow-b{ width:218px !important; line-height:30px !important; height:28px !important; font-size:14px !important;} }
</style>

On appending the code, you get something like this

<div>
<div class="color-1" id='5a24d0da31cfb06c1642030f' data-embedBorderRadius='10' data-embedFontSize='18' data-textcolor='#3DBEBF' data-bgcolor='#FFFFFF' data-prop='outgrow-p' data-type='outgrow-b' data-url='https://democo.outgrow.us/5a24d0da31cfb06c1642030f' data-text='Lets get started'>
</div>
<style>.outgrow-b{ width:278px !important; float:left  !important   ; height:38px !important   ; line-height:normal !important   ; text-align:center !important   ; color:#3DBEBF !important;}.color-1 .outgrow-b:hover{color:#3DBEBF !important; background:rgba(245,245,245,1);}.color-1 .outgrow-b{color:#3DBEBF !important;}@media only screen and (max-width: 600px){.outgrow-b{ width:218px !important; line-height:30px !important; height:28px !important; font-size:14px !important;} }
</style>

<script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/ploader.js'></script><script>initIframe('5a24d0da31cfb06c1642030f');</script>
</div>

Now paste this code in your HTML/Wordpress site.

  • If you are having a Wordpress site then you are probably adding a post or a page.

Look for Post or Page menu in left menu bar and click on Add New. Now paste the code you created with style for button to this page.

  • If you have an HTML installation then just paste the code you created inside body section of your HTML.

Custom HTML Site

Save and preview it.

In case you have any questions or concerns, feel free to reach out to us at [email protected] and we will be happy to assist you further.