[Resolved] CRED API Hooks Email Header and Footer

[Author]

Posts

[lanceS-5]

I am trying to create according to your documentation a default header and footer from a banding perspective. I can see that CRED API Hooks is the solution i just don't know how to add 2 short codes that I can use as the headers and footers for my emails.

I visited this URL: https://toolset.com/documentation/programmer-reference/cred-api/#cred_mail_header

I would like to add the body for each email and the header and footer get added automatically to each notification email:

<!-- WRAPPER / CONTEINER -->
<!-- Set conteiner background color -->
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit;
max-width: 560px;" class="container" width="560" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" align="center">
<!-- HEADER -->
<!-- Set text color and font family ("sans-serif" or "Georgia, serif") -->
<tbody>
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 24px; font-weight: bold; line-height: 130%;
padding-top: 25px;
color: #000000;
font-family: sans-serif;" class="header" valign="top" align="center">[wpv-user field="user_firstname"], welcome to Compare Web </td>
</tr>
<!-- SUBHEADER -->
<!-- Set text color and font family ("sans-serif" or "Georgia, serif") -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-bottom: 3px; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 18px; font-weight: 300; line-height: 150%;
padding-top: 5px;
color: #000000;
font-family: sans-serif;" class="subheader" valign="top" align="center"> Your login has been created successfully </td>
</tr>
<!-- HERO IMAGE -->
<!-- Image text color should be opposite to background color. Set your url, image src, alt and title. Alt text should fit the image size. Real image size should be x2 (wrapper x2). Do not set height for flexible images (including "auto"). URL format: [base_url]/?utm_source={{Campaign-Source}}&utm_medium=email&utm_content={{Ìmage-Name}}&utm_campaign={{Campaign-Name}} -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;
padding-top: 20px;" class="hero" valign="top" align="center"></td>
</tr>
<!-- PARAGRAPH -->
<!-- Set text color and font family ("sans-serif" or "Georgia, serif"). Duplicate all text styles in links, including line-height -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 17px; font-weight: 400; line-height: 160%;
padding-top: 25px;
color: #000000;
font-family: sans-serif;" class="paragraph" valign="top" align="center"> You can access the dashboard by login in here. </td>
</tr>
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 17px; font-weight: 400; line-height: 160%;
padding-top: 25px;
color: #000000;
font-family: sans-serif;" class="paragraph" valign="top" align="center"> Important: To complete the next step you need to register your company. Click on the button below. </td>
</tr>
<!-- BUTTON -->
<!-- Set button background color at TD, link/text color at A and TD, font family ("sans-serif" or "Georgia, serif") at TD. For verification codes add "letter-spacing: 5px;". Link format: [base_url]/?utm_source={{Campaign-Source}}&utm_medium=email&utm_content={{Button-Name}}&utm_campaign={{Campaign-Name}} -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
padding-top: 25px;
padding-bottom: 5px;" class="button" valign="top" align="center">
hidden link" target="_blank" style="text-decoration: underline;">
<table style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding: 12px 24px; margin: 0; text-decoration: underline; border-collapse: collapse; border-spacing: 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" valign="middle" bgcolor="#E9703E" align="center">
Register your Company
</td></tr></tbody></table>
</td>
</tr>
<!-- LINE -->
<!-- Set line color -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
padding-top: 25px;" class="line" valign="top" align="center">
<hr style="margin: 0; padding: 0;" noshade="" width="100%" size="1" color="#E0E0E0" align="center">
</td>
</tr>
<!-- LIST -->
<!-- LINE -->
<!-- Set line color -->
<!-- PARAGRAPH -->
<!-- Set text color and font family ("sans-serif" or "Georgia, serif"). Duplicate all text styles in links, including line-height -->
<tr>
<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 17px; font-weight: 400; line-height: 160%;
padding-top: 20px;
padding-bottom: 25px;
color: #000000;
font-family: sans-serif;" class="paragraph" valign="top" align="center"> Have any question? Knowledgebase
</td>
</tr>
<!-- End of WRAPPER -->
</tbody>
</table>

[Christian Cox]

Hi, I see how this is confusing. You're trying to do something unrelated to the cred hook you mentioned. The cred mail header hook is not for HTML email designs that include a "header" and "footer", i.e. visual areas at the top of the email and bottom of the email. The CRED email header hook is for manipulating email headers like "subject", "from", "return-path" and so on. "Header" in this case is more of a programmatic context than a design context. The best way to include HTML code like this in your email notifications is to place it directly in the email notification editor area. Replace the necessary HTML markup with shortcodes to output the information captured by your CRED form.

A bit more information about the email headers we're referring to in the hook you mentioned:
hidden link

A bit more about automatic email notifications here:
https://toolset.com/documentation/user-guides/automated-email-notifications-with-cred/

[lanceS-5]

Thanks for clearing that up.

if possible could you provide me with an example of such a shortcode doesn't have to be full example just a starting point?

[Christian Cox]

Sure here is an example similar to yours:

<td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 24px; font-weight: bold; line-height: 130%;
padding-top: 25px;
color: #000000;
font-family: sans-serif;" class="header" valign="top" align="center">Hello %%USER_DISPLAY_NAME%%, thanks for submitting this post.</td>

More information about email placeholders here:
https://toolset.com/documentation/user-guides/how-to-use-custom-placeholders-in-cred-notifications/