The following is the base code needed to use this embeddable component in your web page:
<div id="torre-careers"></div>
<script src="https://components.torre.co/embeddable-careers/careers.min.js"></script>
<script>
TorreCareers(organization_public_id);
</script>
(Required) organization_public_id:
Type: String (case sensitive)
Description: You should pass a valid organization publicId in the first parameter of the constructor function organization_public_id for the component to retrieve the jobs of the organization.
You could find this id by going to the Team Genome of the organization, and checking the path just below the Organization name section, in the first column of the genome.
For Torre you could find this URL (https://torre.co/teams/Torre) just below Torre’s title, the organization_public_id would be then Torre (case sensitive).
(Optional) config:
Type: Object
Description: This parameter is used to pass the following optional nested parameters.
config.elementId
Type: String
Description: You could provide your own id for <div> container of the component. The default value for this elementId is torre-careers. Please make sure this elementId is the same in the id tag inside the div container of the component. For example,
<div id="custom-id"></div>
<script>
TorreCareers("organization_public_id", {
elementId: "custom-id";
});
</script>
config.locale
Type: String
Description: Set this locale with the key locale you want to use. The supported locales by default are en for English copies, and es for Spanish translation, so you could set this value with one of these locale keys without having to add the translations support. However, you could add more languages by specifying the locale key in this parameter.
If you set a locale which is not supported by default, you must add the translations for it by adding the config.translations object with the new locale key including the desired translations for this locale. For example,
<script>
TorreCareers("organization_public_id", {
locale: "fr",
translations: {
"fr": {
"yearly": "annuelle",
...
}
}
});
</script>
config.translations
Type: Object
Description: You could add your own translations for each copy you want to handle by yourself. It should follow the following structure.
{
"<locale_key>": {
"copy 1": "translation 1",
"copy 2": "translation 2"
}
}
Make sure that the locale_key matches with the config.locale defined.
Also, you could overwrite en and es translations by adding in this paramater the copies that want to overwrite, inside the respective locale_key. For example,
<script>
TorreCareers("organization_public_id", {
locale: "en",
translations: {
"en": {
"Remote": "Work from home",
...
},
"es": {
"Remote": "Trabaja desde casa",
...
}
}
});
</script>
config.prefix
Type: String
Description: You could change the default prefix for CSS selectors logic. The default PREFIX default is torre-careers. If you change this prefix by setting this parameter, please make sure you also have the same prefix in your styles sheet, otherwise your own styles won’t be applied. You could find more information about how to use this prefix in the next section about styles customization.
To be sure to avoid specificity issues with CSS, make sure any custom selectors you add are preceded by .PREFIX. For example, if your prefix is ABC, you would target the button styles with this selector:
.ABC .ABC__element {
/* your element styles go here */
}
We have the following available classes to style the elements:
PREFIX default is torre-careers.
{PREFIX}__list{PREFIX}__list-item{PREFIX}__list-item-title{PREFIX}__list-item-compensation{PREFIX}__list-item-location{PREFIX}__list-item-CTA{PREFIX}__brand{PREFIX}__brand-linkYou could custom the style of every element inside the component by selecting the element and adding your own styling rules in your styles sheet.
We have the following possible exceptions:
No such DOM element with an id.
This exception will be emitted if you don’t set the component’s id in <div> container. This exception could be present also if you don’t have the same id in the <div> container and the optional elementId parameter.
Required organization id not found. and Required organization id is invalid.
The organizationPublicId is required to load the Careers page available in the organization. Therefore, you must to pass a valid public id of the organization. Otherwise one of both exceptions will be emitted.
The given <parameter> value is not valid.
You could pass an optional config object in the initialization of the component. However, all the properties should follow the specifications detailed above in this documentation. If any parameter inside the config file don’t match with the required type, this exception will be triggered.
An example of how you can use this in code is shown as follows:
Create a new HTML file called index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Careers embeddable component | Torre</title>
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div id="custom-id"></div>
<script src="https://components.torre.co/embeddable-careers/careers.min.js"></script>
<script>
TorreCareers("organization_public_id", { elementId: "custom-id", locale: "en", translations: { "en": { "Remote": "Remotely" } } });
</script>
</body>
</html>
And replace "organization_public_id" for the public id of your organization in Torre.
Create a new CSS file in the same folder called index.css and add the following code:
.torre-careers .torre-careers__list {
color: red;
list-style-type: none;
font-family: Sans-Serif;
display: inline-flex;
flex-direction: column;
}
.torre-careers .torre-careers__list-item {
padding: 1rem;
background-color: #27292D;
margin-bottom: 0.5rem;
border-radius: 10px;
flex-direction: column;
position: relative;
}
.torre-careers .torre-careers__list-item-title {
text-decoration: none;
display: inline-block;
color: #CDDC39;
font-size: 1rem;
margin-bottom: 0.5rem;
margin-right: 1rem;
}
.torre-careers .torre-careers__list-item-compensation {
color: #EAEAEA;
display: inline-block;
font-size: 14px;
font-weight: normal;
margin-bottom: 0.25rem;
}
.torre-careers .torre-careers__list-item-location {
color: #FFFFFFA6;
font-size: 12px;
display: inline-block;
margin-bottom: 1rem;
}
.torre-careers .torre-careers__list-item-CTA {
display: inline-block;
border-radius: 20px;
text-decoration: none;
background-color: #CDDC39;
font-size: 14px;
color: #27292D;
padding: 0.5rem 1rem;
position: absolute;
right: 1rem;
bottom: 1rem;
text-transform: uppercase;
box-shadow: -2px -2px 2px rgba(56, 59, 64, 0.7), 2px 2px 6px rgba(1, 1, 1, 0.5);
}
Once you check the index.html file in your browser, you’ll be able to observe the jobs from your company in Torre, styled with Torre’s brand. Additionally, if you want to check a functional demo you could find it on this link.