If you’re not familiar with inline boxes, read this article first.
Inline Boxes are very similar to other box types in Digioh, the main differences relate to how they inject on your page(s), so we’ll go through the main options shown in the Box Editor Widget accordion, which defines these.
Widget Type: Set this to “inline”. Note that you can easily switch between box types here, and your old settings will be preserved if you change your mind.
Removal Rules: If you set “Remove After Conversion” the box will disappear immediately after the first form submit. Note that this will skip any Thankyou page you have configured.
Custom JS Rules: This is an advanced feature for developers. We recommend leaving the default “Run All Custom JavaScript”. One use case for disabling it would be, for example, if you do not want Google Analytics tracking for this particular inline box.
Position Using: We recommend either “Smart Tag” or “jQuery Selector”. The other options are for special use cases, email us at contact@digioh.com if you need more information. Smart Tag is the most straightforward option, simply paste the provided smart tag onto your page where you want the box to inject. The downside of Smart Tags is that you have to edit your pages for each new box. The more advanced approach is jQuery selector.
NOTE: the insertion point, whether smart tag or jQuery, also acts as a form of condition. If the insertion point is not present on that page, even if conditions pass, you will not see it. When troubleshooting display issues on a particular page, verify that both conditions are true and that the smart tag (or jQuery element) is present on the page.
jQuery: Positioning boxes with jQuery means that you do not have to update your page to place an explicit “injection point”, you inject the box next to an existing HTML element on your page element, without having to make page changes. Some tips:
1) For a primer on jQuery, this is a good article.
2) If you want to embed an inline at multiple points on the same page, you can use jQuery OR syntax, which is the comma, e.g. selector “#header, #footer” will inject at both the HTML element with id=header and id=footer.
3) Class based selectors are useful here, since they automatically inject the box next to all elements with that class.
Questions? Comments? Email us at contact@digioh.com