Integration (HTML)

When you create a new ad space, you automatically get the code needed for integration shown on your dashboard. However, there’s more to integration than that: You might need to write custom CSS to make the ad space fully integrate with your site.

Empty State

When there is no ad purchased, your ad space will be delivered as follows.

<div class="intravert-space space-available" id="space-ID">
    <span class="placeholder-text">This will be your text!</span>
    <a class="placeholder_button" href="THE_URL">Purchase</a>
</div>

Based on your settings and chosen styles, there might get be classes added and/or styles applied. The hierarchy stays the same though.

Purchased State

Since your ads won’t get purchased right away, it’s important to mock your corresponding ad space. For this, you can copy one of the codeblocks below and apply your own styles to it. Above, you can also check out our demos, which can help you get a feel for the ad spaces.

If you need help with the integration - again, don’t hesitate to reach out!

<a class="intravert-space-link space-mode-text" href="YOUR_URL">
    <div class="intravert-space">
        <span class="booking-text">Your text would belong here!</span>
    </div>
</a>
​
​
<a class="intravert-space-link space-mode-img" href="YOUR_URL">
    <div class="intravert-space">
        <img class="booking-image" src="<SOME IMG>">
    </div>
</a>
​
​
​
<a class="intravert-space-link space-mode-imgtext" href="YOUR_URL">
    <div class="intravert-space">
        <img class="booking-image" src="<SOME IMG>">
        <span class="booking-text">Your text would belong here!</span>
    </div>
</a>

Please note: Based on your settings, classes might get added here and styles might get applied, those will be analogous for the open / purchased state though, so you can play around with it!