Add New VDP Button
- Kayla Ingersoll
Follow the instructions below to add a new VDP button.
Please note that this ONLY applies to buttons that are not a part of the standard array of buttons we can use, and cannot render a pop-up form. If the button needs to render a pop-up form, please see the regular VDP Buttons article for how to adjust our existing buttons to suit your needs.
To add a new button to the VDP, navigate to the site in question’s dynamic-inventory-detail page.
Go to the Developer tab on the dynamic-inventory-detail page.
In the Page Footer Scripts box, add the following code (replacing any placeholders with the appropriate information):
<script>
$('.primary-cta-wrapper').append('<li><a href="/URL GOES HERE" target="_blank" class="btn btn-secondary">NAME OF CTA HERE</a></li> ');
</script>
This script will automatically place this button below the standard array of CTA buttons.
If you need to adjust the position of the button, you will need to change the “primary-cta-wrapper” target in the script to another container to append it elsewhere. However, we generally recommend putting it at the bottom of the existing buttons to keep things consistent and reduce confusion for the user.
You may also change the “btn-btn-secondary” to “btn-btn-primary” if the colors need to match the primary button colors of the site.