# Passing text into a custom module

**URL:** <https://community.hubspot.com/t/passing-text-into-a-custom-module/11133>\
**Category:** CMS Development\
**Created:** [December 5, 2018, 6:26pm UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133 "2018-12-05T18:26:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![dsiglin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsiglin/32/53612_2.png) [@dsiglin](https://community.hubspot.com/u/dsiglin)\
**Post date:** [December 5, 2018, 6:26pm UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/1 "2018-12-05T18:26:34Z")

</div>

Hi, code question about calling custom modules.

I’ve set up custom modules to house the various email code components. For instance my header 3 component loos like this:

```auto
 <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="3" color="#D3BB39">
 <h3 style="font-weight: 500; color: #D3BB39; font-size: 18px; line-height: 120%; margin: 22px 0 9px 0;">{% text "h3_text" value="{{ module.h3_text }}", no_wrapper="True" %}</h3>
 </font>

```

I then create a new email template and call the component like this:

`{% module "h3" module_id="4406934" label="section header" %}`

My question: is there a way to pass in / pre-populate the text when I call the h3 component? Thanks.

ps - what I’m trying to do is create a single source of truth for various email elements like headers, buttons, etc. If I can pass in the text when I call the component that will allow for great flexibility.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 6, 2018, 1:49am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/2 "2018-12-06T01:49:49Z")

</div>

@dsiglin,

`{% module "h3" module_id="4406934" label="section header" value="some amazing text" %}`

---

<div class="post-metadata">

**Author:** ![dsiglin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsiglin/32/53612_2.png) [@dsiglin](https://community.hubspot.com/u/dsiglin)\
**Post date:** [December 6, 2018, 1:56am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/3 "2018-12-06T01:56:17Z")

</div>

Thank you, I will try that out. In the meantime I discovered macros. It allows me to pass in multiple variables.

```auto
{% from 'Vast/Modules/earnnest-custom__email-components.html' import h1 %}
{{ h1("Did we miss something?") }}

```

@dennisedson is there a way to pass in multiple variables using the method you showed?

Using Macros I found out I can pass in multiple variables which is great for buttons like this:

```auto
{% macro button (button_url, target, text) %}
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td style="padding: 0;">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="2" color="#ffffff" bgcolor="#716F7e">
 <td align="center" style="border-radius: 8px; color:#ffffff; background-color:#716F7e;">
 <a href="{{ button_url }}" target="{{ target }}" style="font-size: 16px; font-family: 'Ubuntu', Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 8px; padding: 10px 32px; border: 1px solid #716F7e; display: inline-block; text-transform: uppercase; font-weight: 500;">{{ text }}</a>
 </td>
 </font>
 </tr>
 </table>
 </td>
 </tr>
 </table>
{% endmacro %}

```

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 6, 2018, 2:04am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/4 "2018-12-06T02:04:07Z")

</div>

@dsiglin, have you considered making your components with custom modules?

i build all of my sections with custom modules then add them to the html file.

i try to encapsulate them as mush as possible as email is finnicky at best

---

<div class="post-metadata">

**Author:** ![dsiglin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsiglin/32/53612_2.png) [@dsiglin](https://community.hubspot.com/u/dsiglin)\
**Post date:** [December 6, 2018, 2:28am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/5 "2018-12-06T02:28:26Z")

</div>

I believe that’s what was doing originally. I created a module for h3

```auto
 <font face="'Ubuntu' , Helvetica, Arial, sans-serif;" size="3" color="#D3BB39">
 <h3 style="font-weight: 500; color: #D3BB39; font-size: 18px; line-height: 120%; margin: 22px 0 9px 0;">{% text "h3" value="h3", no_wrapper="True" %}</h3>
 </font>

```

I then called the h3 module in the HTML email template like this:

`{% module "module_1544063249129271" module_id="4406934" label="earnnest-custom__h3" %}`

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 6, 2018, 2:37am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/6 "2018-12-06T02:37:33Z")

</div>

@dsiglin,

yep

my modules tend to include more elements.

i would have a heading, an image and a paragraph for example. I dont think i have ever limited the module to a single h3.

also, keep in mind that you can make the module a repeater module. that is pretty powerful

---

<div class="post-metadata">

**Author:** ![dsiglin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsiglin/32/53612_2.png) [@dsiglin](https://community.hubspot.com/u/dsiglin)\
**Post date:** [December 6, 2018, 2:53am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/7 "2018-12-06T02:53:49Z")

</div>

I really need to look into repeater modules. Thanks for the help by the way. Appreciate it.

---

<div class="post-metadata">

**Author:** ![dsiglin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsiglin/32/53612_2.png) [@dsiglin](https://community.hubspot.com/u/dsiglin)\
**Post date:** [December 6, 2018, 2:58am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/8 "2018-12-06T02:58:01Z")

</div>

Oh, forgot to ask, using modules is it possible to pass in multiple objects? For buttons I want to pass in the button url, button target, and button text.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 6, 2018, 3:05am UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/9 "2018-12-06T03:05:04Z")

</div>

@dsiglin,

yep. set each as a separate text field.

easy peasy

---

<div class="post-metadata">

**Author:** ![Julian-Harris](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/julian-harris/32/14279_2.png) [@Julian-Harris](https://community.hubspot.com/u/Julian-Harris)\
**Post date:** [December 11, 2018, 7:16pm UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/10 "2018-12-11T19:16:40Z")

</div>

This is a great thread -- I have a programming background but I’m struggling to understand a few pieces.

I am adding a Stripe button to HubSpot so my pages can do payments.

var stripe = Stripe(‘pk\_live\_XXXXXXXXXX’, { betas: [‘checkout\_beta\_3’] });

the pk\_live cannot be hard-coded in the component; it needs to be an input parameter. Would it be something like this:

var stripe = Stripe(‘{{stripe\_sku\_id}}’, { betas: [‘checkout\_beta\_3’] });

? If so how do I set this in a given instance of a form (ie a landing page)?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 11, 2018, 8:44pm UTC](https://community.hubspot.com/t/passing-text-into-a-custom-module/11133/11 "2018-12-11T20:44:26Z")

</div>

@Julian-Harris,

you should probably open a new thread for this one.

this wont work the same way as forms work differently.

@tjoyceis the wizard of forms 🙂