Deprecated HubL tags - HubSpot docs

The following is a list of HubL supported tags that are deprecated. While these tags still operate as intended, newer tags have been created to replace them that are more streamlined and optimized. These new tags are indicated below. This page is for historical reference.

Custom Widgets

This tag has been replaced by custom module tag.

Follow Me

Follow me modules render icons that link to your various social media profiles. The icons that display are based upon your Social Settings.

This tag is replaced by the newer Follow Me default module.

HubL
Output

{% follow_me "follow_me" %}
{% follow_me "follow_us" title='Follow Us', module_title_tag="h2" %}

<span id="hs_cos_wrapper_module_14162805806361260" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_follow_me" style="" data-hs-cos-general-type="widget" data-hs-cos-type="follow_me">
<h2>Follow Us</h2>
<div style="">
<a target="_blank" class="fm_button fm_googleplus" href=""><span title="Follow us on Google+"></span></a>
<a target="_blank" class="fm_button fm_facebook" href=""><span title="Follow us on Facebook"></span></a>
<a target="_blank" class="fm_button fm_twitter" href=""><span title="Follow us on Twitter"></span>
</div>
</span>

A global widget is one which can be shared across template

The tag has been replaced with the custom module tag.

{% global_widget "facebook_fan_box" overrideable=False, label='Facebook Fan Box' %}"

Google search

The Google Search Tag and modules are no longer available. This has been replaced by HubSpot’s own content search.

Image slider

Generates a HubSpot image slider module. This slider module is based on FlexSlider. While you can create a slider module with standard module HubL syntax, If you want to predefine default slides using HubL, you must use block syntax. Both methods are shown below.

This tag has been deprecated in favor of the Gallery tag.

HubL
Output

{% image_slider "image_slider" %}

<-- Block syntax -->
{% widget_block image_slider "crm_slider" sizing='static', only_thumbnails=False, transition='slide', caption_position='below', with_thumbnail_nav=False, lightbox=False, auto_advance=True, overrideable=True, description_text='', show_pagination=True, label='Image Slider', loop_slides=True, num_seconds=5  %}
{% widget_attribute "slides" is_json=True %}[{"caption": "CRM Contacts App", "show_caption": true, "link_url": "http://www.hubspot.com/crm", "alt_text": "Screenshot of CRM Contacts", "img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240", "open_in_new_tab": true}, {"caption": "HubSpot CRM Contact Profile", "show_caption": true, "link_url": "http://www.hubspot.com/", "alt_text": "HubSpot CRM Contact Profile", "img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240", "open_in_new_tab": true}]{% end_widget_attribute %}
{% end_widget_block %}

<span id="hs_cos_wrapper_crm_slider" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image_slider" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image_slider">
    <div id="hs_cos_flex_slider_crm_slider" class="hs_cos_flex-slider flex-slider-main slider-mode-slider">
        <div class="hs_cos_flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="hs_cos_flex-slides hs_cos_flex-slides-main " style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);">
                <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;">
                    <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false" /></a>
                    <div class="caption">HubSpot CRM Contact Profile</div>
                </li>
                <li class="hs_cos_flex-slide-main hs_cos_flex-active-slide" style="width: 1090px; float: left; display: block;">
                    <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false" /></a>
                    <div class="caption">CRM Contacts App</div>
                </li>
                <li class="hs_cos_flex-slide-main" style="width: 1090px; float: left; display: block;">
                    <a href="//www.hubspot.com/" target="_blank"><img src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686" alt="HubSpot CRM Contact Profile" draggable="false" /></a>
                    <div class="caption">HubSpot CRM Contact Profile</div>
                </li>
                <li class="hs_cos_flex-slide-main clone" aria-hidden="true" style="width: 1090px; float: left; display: block;">
                    <a href="//www.hubspot.com/crm" target="_blank"><img src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686" alt="Screenshot of CRM Contacts" draggable="false" /></a>
                    <div class="caption">CRM Contacts App</div>
                </li>
            </ul>
        </div>
        <ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging">
            <li><a class="hs_cos_flex-active">1</a></li>
            <li><a class="">2</a></li>
        </ol>
        <ul class="hs_cos_flex-direction-nav">
            <li><a class="hs_cos_flex-prev" href="#">Previous</a></li>
            <li><a class="hs_cos_flex-next" href="#">Next</a></li>
        </ul>
    </div>
    <script>
    window.hsSliderConfig = window.hsSliderConfig || {};
    window.hsSliderConfig['crm_slider'] = {
        mode: 'slider',
        mainConfig: {
            animationLoop: true,
            direction: 'horizontal',
            slideshowSpeed: 5000.0,
            controlNav: true,
            smoothHeight: false,
            namespace: 'hs_cos_flex-',
            slideshow: true,
            selector: '.hs_cos_flex-slides > li',
            animation: 'slide',
        },
    };
    </script>
</span>

Parameter	Type	Description	Default
`sizing`	Enumeration	Determines whether the slider changes sizes, based on the height of the slides. Possible values include: “static” or “resize”	`"static"`
`only_thumbnails`	Boolean	Display images as thumbnails instead of a slider.	`False`
`transition`	Enumeration	Sets the type of slide transition. Possible values include: “fade” or “slide”	`"slide"`
`caption_position`	Enumeration	Affects positioning of caption on or below the slide. Possible values include “below” or “superimpose”	`"below"`
`with_thumbnail_nav`	Boolean	Include thumbnails below slider for navigation (only_thumbnails must be False for this to be True)	`False`
`lightbox`	Boolean	Displays thumbnail image in lightbox, when clicked (with_thumbnail_nav must be True for this to be True)	`False`
`auto_advance`	Boolean	Automatically advance slides after the time set in num_seconds	`False`
`show_pagination`	Boolean	Provide buttons below slider to randomly navigate among slides	`True`
`label`	String	A label for this module, visible in the editor only	`"Image Slider"`
`loop_slides`	Boolean	When True, continuously loop through slides	`True`
`num_seconds`	Number	Time in seconds to pause between slides	`5`
`slides`	JSON	A JSON list of the default caption, the link url, the alt text, the image src, and whether to open in a new tab. See block syntax above.

​Custom Widgets

​Follow Me

​Global Widget

​Google search

​Image slider

Custom Widgets

Follow Me

Global Widget

Google search

Image slider