CMS Development

Yaqi
Participant

Issue to add a custom module to a page template

SOLVE

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: https://help.workable.com/hc/en-us/articles/115012801727-How-to-embed-jobs-on-your-website

 

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: https://app.hubspot.com/design-manager/5200787/modules/19486703745  (i guess only hubspot techinical support can see this link?)

 

Can anyone help me?

 

Thanks a lot!

 

Regards,

Yaqi

 

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Issue to add a custom module to a page template

SOLVE

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;
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

7 Replies 7
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Issue to add a custom module to a page template

SOLVE

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?

 

Screeenshot - 2019-10-29 at 1.32.53 PM.png

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Yaqi
Participant

Issue to add a custom module to a page template

SOLVE

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 🙂

0 Upvotes
Yaqi
Participant

Issue to add a custom module to a page template

SOLVE

@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? 🙂

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Issue to add a custom module to a page template

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Yaqi
Participant

Issue to add a custom module to a page template

SOLVE

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!

0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Issue to add a custom module to a page template

SOLVE

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;
}
Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Yaqi
Participant

Issue to add a custom module to a page template

SOLVE

@Kevin-C Thank you a loooooot!! 😄 

0 Upvotes