CMS Development

hannalofving
Contributor

Embed CTA in blog post template

I would like to edit my post template for one of our blogs to include a CTA-picker that presents a CTA in the bottom of the blog post.

 

I have added this code to my template. First I create the CTA at the top of my template like this:
{% cta 'my_cta' label='Välj CTA', guid='14e89f20-dc26-4e8e-ba93-01741014f967', image_src='
https://no-cache.hubspot.com/cta/default/2636281/14e89f20-dc26-4e8e-ba93-01741014f967.png' %}

My problem is when I'm trying to present the CTA, this is what I have tried the latest:
{{ widget_data.my_cta.embed_code}}
But nothing is presented.

I have tried to extract other things from my "my_cta" but without success. I have tried all the from this page
https://designers.hubspot.com/docs/hubl/hubl-supported-tags#hs_cos_wrapper_widget_2808334243

And I have also tried to instead of a CTA in the beginning created a text object and using that text object to create a new CTA directly in the code where I want my CTA.
But I don't know how to nest the variables and the functions.

 

This is my line as I tried it:
{{ cta(' {{ widget_data.cta_guid.value }}') }}

Which method is best for me? Can anyone help me with the correct code for the best method?

(Note that I have 4 different blog types, hence the if group.id)

Here are my declarations, I have tried using CTA and TEXT fieldsHere are my declarations, I have tried using CTA and TEXT fieldsHow can I get the CTA and present it?How can I get the CTA and present it?

0 Upvotes
3 Replies 3
lscanlan
HubSpot Alumni
HubSpot Alumni

Embed CTA in blog post template

Hi @hannalofving,

 

To get the module's data into the widget_data dictionary, you'll need to add the export_to_template_context=true parameter to the module tag. That parameter is documented here: https://designers.hubspot.com/docs/hubl/export-to-template-context. So in your case that would look something like this:

 

{% cta 'my_cta' label='Välj CTA', guid='14e89f20-dc26-4e8e-ba93-01741014f967', image_src='https://no-cache.hubspot.com/cta/default/2636281/14e89f20-dc26-4e8e-ba93-01741014f967.png', export_to_template_context=true %}

 

That will prevent the actual CTA module from being printed into the HTML. And instead the module data will be exported into the widget_data dictionary. I'd also suggest taking a look at this article about using the Developer Info tab: https://designers.hubspot.com/docs/hubl/how-to-use-developer-info-on-cos-pages/. That will make it easier to see how to access values in HubL, like within widget_data for example.

 

You also could probably build a custom module for this, where the blog post author would have a field(s) for enntering in the value they need. I wrote up a sort of tutorial on how to access module data through HubL here: https://community.hubspot.com/t5/Share-Your-Work/How-to-add-Featured-Video-functionality-to-a-blog/m....

 

If you're still having trouble, could you link me to the blog you're working on? I'll be happy to take a closer look.

Leland Scanlan

HubSpot Developer Support
0 Upvotes
hannalofving
Contributor

Embed CTA in blog post template

@lscanlan Thanks for your reply!

However, I made a quick fix and removed my cta as for now, but will test your suggestion when I have time to look in to the problem again.

0 Upvotes
lscanlan
HubSpot Alumni
HubSpot Alumni

Embed CTA in blog post template

Ok, sounds good! If you run into questions next time, feel free to reply here and I'll take a look then.

Leland Scanlan

HubSpot Developer Support
0 Upvotes