Issue to add a custom module to a page template

[Yaqi]

Hi everyone,

I want to add our job offers under the text “Job openings” in this page : https://corporate.bepark.eu/careers-join-bepark?hs_preview=NvVTppdG-19385899563#

As we are using Workable for our job offers, I wanted to follow this instruction to embed jobs on our website: How to embed jobs on your website (job widget) – Workable Help

Thus, I got the code I need from workable and created a custom module on hubspot, then I added this module to the page, but I don’t see anything on the page

This is the custom module I created: Design Manager | HubSpot (i guess only hubspot techinical support can see this link?)

Can anyone help me?

Thanks a lot!

Regards,

Yaqi

[Kevin-C]

Hey @Yaqi

Shot in the dark here, but did you happen to paste the Workable JS script tages into the JS sections of the custom module you built rather than the html section?

[Yaqi]

Hey @Kevin-C thanks for your reply!

I only have this code from workable:

<script src='https://www.workable.com/assets/embed.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'>
whr(document).ready(function(){
whr_embed(71017, {detail: 'titles', base: 'jobs', zoom: 'country', grouping: 'departments'});
});
</script>
<div id="whr_embed_hook"></div>

So i put this code to the JS section. Should i modify it?

Thank you

[Yaqi]

@Kevin-CTo give you more information, for this custom module, basically I just added the workable code to the JS section, and I didn’t do anything else. Is this the reason we don’t see anything on the web page?

[Kevin-C]

Hey @Yaqi

Yep thats the issue! A high high high level of interpretation, that JS section will provide the “<script>” tags for you. But you can ignore that statement for now…

To get this working for you as fast as possible, instead of putting the provided javascript in the JS section paste it into the html section, script tags and all. Give that a go and let us know if it get the content where you need it.

I can go further into how I tested to discover the issues and why they are issues at a later time if desired.

[Yaqi]

Hi @Kevin-C I just tried to put the code to the section “HTML+HUBL”, now it shows!

https://corporate.bepark.eu/careers-join-bepark?hs_preview=NvVTppdG-19385899563

However, do you know how can I center it and change the text size and color? ^^

Thank you!

[Kevin-C]

Hey @Yaqi

Thats my favorite part!

Below I’ve written up a little CSS for this section. I have proivided all the classes you would need and ensured that they are names spaced / scoped to the parent element so any modification here will not mess up anything else on the site.

Paste this into the CSS section and modify as needed!

#whr_embed_hook {
 max-width: 768px;
 margin: auto; /* center the layout*/
 text-align: center; /* text alignment */
 padding: 0 1em; /* added some padding to prevent any mobile issues */
}

#whr_embed_hook .whr-group { /* This is the group title - ie "sales" "hr" etc */
 font-size: 2em;
 font-weight: 500;
 padding-bottom: 0.25em;
 color: black;
 text-align: center;
 border-bottom: 1px solid #006580;
}

#whr_embed_hook .whr-items .whr-item { /* Job Posting Item Parent */
 margin-bottom: 2em;
}

#whr_embed_hook .whr-items .whr-item h3.whr-title { /* Item Titles */
 font-size: 1.25em;
 margin: 0;
}

#whr_embed_hook .whr-items .whr-item h3.whr-title a:hover { /* Item Titles Hover State */
 color: #6cc616;;
}

#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-location { /* Location text */
 font-size: 1em;
 color: #65696d;
}

#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-date { /* Creation Date Text */
 font-size: 0.75em;
 color: #65696d;
}

[Yaqi]

@Kevin-C Thank you a loooooot!!