Swappa Device Widget

Add to your site in three steps

Add our code

Include this script in the header of any pages that will show the widget.
<script src="https://static.swappa.com/static/widget/widget.min.js" async></script>

Choose where you want it

Simply insert a div with the class .swappa-widget where you want the widget to be.
<div class="swappa-widget" style="min-height:150px;"></div>
The widget will now attach to this div when the page is loaded.

Set parameters

Set these options to get the most out of the widget on your site. These can be set either on the script element or the .swappa-widget div.
• data-affiliate-code="your_affiliate_code"
Must be set for you to get credit for the referral. Sign up to get an affiliate code
• data-primary-device="samsung-galaxy-s9"
Optional. This is used to specify the initial device shown. If a Swappa slug isn't working try using the root slug like google-pixel instead of google-pixel-unlocked.
• data-single-device
Optional. This removes the dropdown for featured devices. Add this if your users only care about the device you are targeting.
• data-shop-subject="your next phone"
Optional. This lets you change the text of title "Shop {SUBJECT} on Swappa". Use this to make it fit with your content better.
• data-compact
Optional. Removes the header for a more compact version.

Example

Here is the div used to generate the widget at the top of this page:

Sizing

The widget automatically changes based on the width of the div container you provide for it. Simply change the width of the .swappa-widget div to adjust the size. Go ahead and resize this page to see it in action!
We recommend setting the div to a minimum height of at least 150px to minimize moving the content below it when it loads. This is already included in the example.