CMS Development

SteveBari
メンバー | Diamond Partner
メンバー | 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 いいね!
2件の返信
Kim_HM
トップ投稿者 | Diamond Partner
トップ投稿者 | 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
HubSpot製品開発チーム
HubSpot製品開発チーム

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!

0 いいね!