CMS Development

SteveBari
Member | Diamond Partner
Member | Diamond Partner

Add Smart Rules directly in a Global Module (To be used as an embedded CTA)

I've made a global module to emded directly into blog post body content, acting as a CTA banner, using the "usage snippet" to embed - but I can't seem to make it smart. 

 

I've tried adding an IF statement directly into the hubl code, but it doesn't work on the front end...  It always shows the default setting. I used...

{{contact.lifecyclestage}}

...to print the name of the lifecylce stage on the page to show me what result I should expect, but even when "lead" returned, only the "else" content showed. 

 

I also checked in the CRM the contact property was set to "lead" and still nothing 😞 

 

This is the if statement I used. 

{% if contact.lifecyclestage == "lead" %}
<!--Add relevant HTML for CTA-->
{% elif contact.lifecyclestage == "mql" %}
<!--Add relevant HTML for CTA-->
{% else%}
<!--show default HTML for CTA-->
{% endif %}

 

Here is the HTML/hubl and CSS for the module:

 

<!--- If user meets MQL criteria --->
{% if contact.lifecyclestage == "lead" %}
 <!-- User meetings lead criteria -->
  <div class="cta-container magenta-gradient-bg">
  <h2 class="cta-text">Want some personal feedback on your pipeline?</h2>
  <br>
  <p class="cta-text">Speak with our pipeline expert.</p>
  <!--HubSpot Call-to-Action Code "Global-CTA-07-10-2020-schedule-a-call" -->
 <span class="hs-cta-wrapper" id="hs-cta-wrapper-25502ce5-f444-4f55-91c5-b33c7c2b700c">
   <span class="hs-cta-node hs-cta-25502ce5-f444-4f55-91c5-b33c7c2b700c" id="hs-cta-25502ce5-f444-4f55-91c5-b33c7c2b700c">
     <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
     <a href="https://cta-redirect.hubspot.com/cta/redirect/416628/25502ce5-f444-4f55-91c5-b33c7c2b700c" >
       <img class="hs-cta-img" id="hs-cta-img-25502ce5-f444-4f55-91c5-b33c7c2b700c" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/416628/25502ce5-f444-4f55-91c5-b33c7c2b700c.png"  alt="Schedule a call"/>
     </a>
   </span>
   <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
   <script type="text/javascript"> hbspt.cta.load(416628, '25502ce5-f444-4f55-91c5-b33c7c2b700c', {}); </script>
    </span>
    <!-- end HubSpot Call-to-Action Code -->
    <p class="cta-text small" ID="sub-cta">( It's free )</p>
  </div>

{% elif contact.lifecyclestage == "marketingqualifiedlead" %}

  <div class="cta-container magenta-gradient-bg">
  <h2 class="cta-text">Let's get started on our journey</h2>
  <br>
  <p class="cta-text">See the launch pad below.</p>
  <!--HubSpot Call-to-Action Code "Global-CTA-07-10-2020-schedule-a-call" -->
 <span class="hs-cta-wrapper" id="hs-cta-wrapper-25502ce5-f444-4f55-91c5-b33c7c2b700c">
   <span class="hs-cta-node hs-cta-25502ce5-f444-4f55-91c5-b33c7c2b700c" id="hs-cta-25502ce5-f444-4f55-91c5-b33c7c2b700c">
     <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
     <a href="https://cta-redirect.hubspot.com/cta/redirect/416628/25502ce5-f444-4f55-91c5-b33c7c2b700c" >
       <img class="hs-cta-img" id="hs-cta-img-25502ce5-f444-4f55-91c5-b33c7c2b700c" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/416628/25502ce5-f444-4f55-91c5-b33c7c2b700c.png"  alt="Schedule a call"/>
     </a>
   </span>
   <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
   <script type="text/javascript"> hbspt.cta.load(416628, '25502ce5-f444-4f55-91c5-b33c7c2b700c', {}); </script>
    </span>
    <!-- end HubSpot Call-to-Action Code -->
    <p class="cta-text small" ID="sub-cta">( It's free )</p>
  </div>

{% else%}

  <div class="cta-container">
  <h2 class="cta-text">Are you hitting your revenue goals?</h2>
  <br>
  <p class="cta-text">Work out what's holding you back in 10 minutes</p>
  <!--HubSpot Call-to-Action Code "Global-CTA-07-10-2020-get-your-pipeline-score" -->
    <span class="hs-cta-wrapper" id="hs-cta-wrapper-1ee1a1e4-7117-4196-bb93-d82d5eeb7023">
      <span class="hs-cta-node hs-cta-1ee1a1e4-7117-4196-bb93-d82d5eeb7023" id="hs-cta-1ee1a1e4-7117-4196-bb93-d82d5eeb7023">
        <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
        <a href="https://cta-redirect.hubspot.com/cta/redirect/416628/1ee1a1e4-7117-4196-bb93-d82d5eeb7023" >
          <img class="hs-cta-img" id="hs-cta-img-1ee1a1e4-7117-4196-bb93-d82d5eeb7023" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/416628/1ee1a1e4-7117-4196-bb93-d82d5eeb7023.png"  alt="Get Your Pipeline Score"/>
        </a>
      </span>
      <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
      <script type="text/javascript"> hbspt.cta.load(416628, '1ee1a1e4-7117-4196-bb93-d82d5eeb7023', {}); </script>
    </span>
    <!-- end HubSpot Call-to-Action Code -->
    <p class="cta-text small" ID="sub-cta">( It's free )</p>
  </div>

{% endif %}
.cta-container{
max-width: 95%; 
margin: 50px auto;  
border: 2px solid black;
border-radius:20px;
text-align: center; 
padding: 35px 35px 0px 35px;
background:linear-gradient(135deg, #4ce09e 0%,#5FC4E5 100%);
-webkit-box-shadow: -4px -1px 42px -10px rgba(0,0,0,0.62);
-moz-box-shadow: -4px -1px 42px -10px rgba(0,0,0,0.62);
box-shadow: -4px -1px 42px -10px rgba(0,0,0,0.62);
}

.magenta-gradient-bg {
 background:linear-gradient(135deg, #d8005b 0%,#5FC4E5 100%)!important;
}

.cta-text {
  text-align: center; 
  color:#ffffff;
}
h2.cta-text {
  font-weight: 800!important;
}
.small {
  font-size:0.8rem!important;
}
#sub-cta{
  padding-top:15px;
}

 

And an image of the end CTA displayed on the front end:

 

cta-v1.PNG

Any help would be greatly appretiated.

 

Is there a smarter way to build this module? 

Or to get the same end result, taking a different route?

0 Upvotes
2 Replies 2
Kim_HM
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Add Smart Rules directly in a Global Module (To be used as an embedded CTA)

Hi @SteveBari , 

 

Although I don't have in-depth development knowledge, I would say at first glance that the easiest option for you is to make a regular CTA smart.

 

This works exactly the way you would like and can be easily inserted under blogs. To learn more about smart CTAs, take a look at this page: https://knowledge.hubspot.com/cos-general/create-smart-calls-to-action-cta

 

Hope this helps!

 

Kind regards, 

 

Kim

dennisedson
Community Manager
Community Manager

Add Smart Rules directly in a Global Module (To be used as an embedded CTA)

Hey @SteveBari , 

Thanks for providing all of the information.  

Going to throw a few people to the fire here to see if we can get some help your way!

@stefen , @Anton , @Anonymous .  Hello friends!  What do you think about this?

 

Thanks!

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show
0 Upvotes