A slice to display a Hero-like component for B2B pages, with connection to HubSpot.

With this slice you can display a Hero-like component with buttons and CTAs.

• One of the buttons can also be a Hubspot Popup button. This means that Partners will leave us their contact details through the Hubspot popup, and we will see all new contacts directly on Hubspot in the Contacts section.
• All our forms entries are posted on Netlify. Then we use tools (e.g. Zapier) to connect these entries to other platforms such as Intercom, Hubspot, Google Sheets, Slack, etc. On Netlify, you can find all entries from this Hubspot Form in the 'contact-hubspot-form' (same form used for the "Hubspot Contact Form" entries), in the Forms section.
• We use Zapier to connect Netlify to Hubspot. Thanks to Zapier, we take all info from the form and use them to automatically create a contact in Hubspot. The Zap is called "Incompany: Change Website Form Submission to Hubspot Form Submission". You find it in the "In-Company" folder on Zapier. You can see and edit the Zap HERE
• In Hubspot, the Form currently associated to this is the In-Company Brochure Download. With this form, users show interest in our Brochure about in-company trainings, and they will receive an automatic email after leaving us their details. You can edit this email directly in Hubspot. You can create new forms, but make sure to copy-paste the snippet that they will provide you into the hubspot field (the one with black background).
• NOTE: After submitting the Hubspot form, users will be redirected to the /incompany_application_confirmation page. You can edit this page on Prismic too, it's the In-Company Application Confirmation page

Limits

• NEVER EVER use more than 1 Hubspot component and/or more than one form (including Intercom and Typeforms!) on the same page! Any Hubspot component or Form needs to be the only one on the page in order for the code snippet to work. If you need to add more forms on the same page, add the others as links to buttons; Hubspot allows you to link to forms you create on their platform, plus you could also create a dedicate page on Prismic, only adding the Slice with the form you need, and link that page to the button.
• You can add 2 buttons PLUS a button for the Hubspot Contact Form, but IT IS NOT RECOMMENDABLE TO ADD 3 BUTTONS ON THE HERO! It will look messy, and you don't want to give to CTAs options on your hero. Pick max 2 buttons.
• Very long images work better than square-like images. Ideally, a ratio of 3:1 to 3,3:1 is ideal (which means a height of about 3 times less than the length).
• The Hubspot popup does not work on Storybook, but the popup will work on the website. To have an idea of how the popup will look, check out the Hubspot Contact Form component.
• Make sure to use images of the right format, the ideal is a width of about 165% the height (so for example 1650px X 1000px).

Do's:

• If you want to add a new Hubspot Form, make sure to generate the snippet on Hubspot first and then paste it in the 'hubspot' prop field.
• The current Hubspot Contact Form links to the contact-hubspot-form on Netlify, so you can find all entries there as well. This is the current script for the form, you can either use this:
• <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script><script> hbspt.forms.create({ portalId: "7417500", formId: "bf48233a-0219-4f10-8add-9fdc8a9871b8" }); </script>

Don'ts:

• Pick random colors for the Buttons. Stick to our theme colors. Have a look at the 'Styleguide - Colors & Typography' for a list of our colors.

Props:

1. Title

• Name: title
• Type: String
• Description: The Title of the hero box.

2. Subtitle

• Name: subtitle
• Type: String
• Description: The Subtitle of the hero box.

3. Content

• Name: content
• Type: String
• Description: The Content of the hero box.

4. Button 1 title

• Name: button 1 title
• Type: String
• Description: Text of the first button.

5. Button 1 href

• Name: button 1 href
• Type: String
• Description: Link of the first button.

6. Button 1 color

• Name: button 1 color
• Type: String
• Description: Color of the first button. Please stick to the main colors provided in our Stylesheet!

7. Open Button 1 in new page

• Name: Open btn 1 new page
• Type: Boolean
• Description: Set it to true if you want the link to be opened in another page

8. Button 2 title

• Name: button 2 title
• Type: String
• Description: Text of the second button.

9. Button 2 href

• Name: button 2 href
• Type: String
• Description: Link of the second button.

10. Button 2 color

• Name: button 2 color
• Type: String
• Description: Color of the second button. Please stick to the main colors provided in our Stylesheet!

11. Open Button 2 in new page

• Name: Open btn 2 new page
• Type: Boolean
• Description: Set it to true if you want the link to be opened in another page

12. Hubspot (optional)

• Name: hubspot
• Type: tag
• Description: The snippet you get on Hubspot when creating a new form. If you want to use the "Download brochure" form for in-company trainings, paste this snippet in the field:
• <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script><script> hbspt.forms.create({ portalId: "7417500", formId: "bf48233a-0219-4f10-8add-9fdc8a9871b8" }); </script>

13. Hubspot button outlined

• Name: hubspot btn outlined
• Type: Boolean
• Description: Set it to true if you want the button to be outlined (= border only).

14. Hubspot button color

• Name: hubspot btn color
• Type: String
• Description: Color of the second button. Please stick to the main colors provided in our Stylesheet!

15. Hubspot button text

• Name: hubspot btn text
• Type: String
• Description: Text of the Hubspot button

16. Image

• Name: image
• Type: Object
• Description: Background image. Make sure to add a large image, with ratio of about 3:1 (height of about 1/3 the size of the length).

Repeatable:

This slice has no repeatable area