custom preference center with different categories

[Anton]

Hi guys, 

I have to develop a completly customized preference center for a client. 

The client wants something like - let's call it - accordions in the preference center depending on subscription types. 

For example
There are a few categories like "marketing", "opperational", "sales"...

Each of this category should contain it's own subscription type and if the visitor checks for example "marketing" he'll see and be able to subscribe to all subscriptiontypes which belongs to "marketing". Otherwise all subscriptions of this category are unchecked. 

I mean I could think of something really overengineered with APIs, JavaScript,  whatever but there should be something much simpler, right?

Thanks in advance

Best, 

Anton

[alyssamwilie · Accepted solution]

@Anton Last I checked Hubspot doesn't let you add email preference properties to forms nor can you look them up with HubL variables (sure wish they diiid though) so without getting into the API you'd have to create psuedo properties and use those to check and update the preferences through a workflow.

Our setup for custom prefence pages usually follows along the lines of -- create a custom form in page > use javascript to submit the selections to a Hubspot form (if it's a pretty simple form we skip the javascript and just use a Hubspot form on the page) > use a workflow to change the user's preferences based on the form submission.

[jpsanchez · Accepted solution]

Ok, a will try a KISS aprouch, 

1.- Use two properties. Type_of_subscription and Subtype_of_subscription. 

2.- Use normal forms. 

3.- Conditional form response.  ( if answer this them show this)

4.- Update real subscriptions with a WF. 

OPTION 2.- 

1.- Upload all the types and subtypes of subscriptions in hubspot SETUP. ( as normal use)

2.- Use this construction :  Type1 / Subtype 1 , Type1 / Subtype2 , Type2 / Subtype2 ...etc.. 

3.- Use CSS to Force it. ( with "/" operator or other ./n etc..)

Hope it helps

Best

JP

😉

[Anton]

Quick update: The customer decided to drop this feature and go with the default pref center... 
Nevertheless thanks @alyssamwilie, @jpsanchez and @piersg for the ideas 🙂 

[piersg · Accepted solution]

Hey @Anton, you mean an email preference center? I customised the default email_subscriptions module with JS, it was just to order each subscription type under the category. Example

Here's my JS to re-order/categorise everything. You could take this and make each category an accordion:

window.onload = (event) => {
        var ref = document.querySelector('.email-prefs#content .header');
        if (ref != null) {
          var child = document.createElement("div");
          child.innerHTML = '<div id="marketing"><h4>Marketing</h4></div><div id="service"><h4>Service</h4></div><div id="event"><h4>Events</h4></div><div id="sales"><h4>Sales</h4></div>';

          ref.parentNode.insertBefore(child, ref.nextSibling);
          var items = document.getElementsByClassName('item');
          for (i = 0; len = items.length, i < len; i++){
            let item = items[i];
            let type = item.querySelector('.fakelabel').children[1].textContent.toLowerCase();
            var wrap = document.querySelector('#'+type);
            wrap.appendChild(item);
            let textWrap = item.querySelector('p');
            let text = document.createTextNode(textWrap.textContent);    
            let newText = document.createElement("span");
            newText.appendChild(text);
            let pos = item.querySelector('.fakelabel');
            pos.appendChild(newText);
            textWrap.remove();
            let bold = item.querySelector('.fakelabel span:nth-last-child(2)');
            bold.textContent += ":";
          }
        }
        var button = document.getElementById('submitbutton');
        button.classList.add('button');
        button.classList.add('button--primary');
      };

[webdew]

Hi @Anton ,

The functionality you are looking for is not available in the current version. You have to use a boiler plate theme set up. Check the screenshot below.

https://prnt.sc/12f2bth 

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[jpsanchez · Accepted solution]

Ok, a will try a KISS aprouch, 

1.- Use two properties. Type_of_subscription and Subtype_of_subscription. 

2.- Use normal forms. 

3.- Conditional form response.  ( if answer this them show this)

4.- Update real subscriptions with a WF. 

OPTION 2.- 

1.- Upload all the types and subtypes of subscriptions in hubspot SETUP. ( as normal use)

2.- Use this construction :  Type1 / Subtype 1 , Type1 / Subtype2 , Type2 / Subtype2 ...etc.. 

3.- Use CSS to Force it. ( with "/" operator or other ./n etc..)

Hope it helps

Best

JP

😉

[alyssamwilie · Accepted solution]

@Anton Last I checked Hubspot doesn't let you add email preference properties to forms nor can you look them up with HubL variables (sure wish they diiid though) so without getting into the API you'd have to create psuedo properties and use those to check and update the preferences through a workflow.

Our setup for custom prefence pages usually follows along the lines of -- create a custom form in page > use javascript to submit the selections to a Hubspot form (if it's a pretty simple form we skip the javascript and just use a Hubspot form on the page) > use a workflow to change the user's preferences based on the form submission.

[Anton]

Hey @alyssamwilie, 

thank you for the input/idea. Will discuss it with the team and definitely test the "custom form" idea. If this works I'll come back 😀

have a great day

[dennisedson]

Is there anything simpler 🤔

@tjoyce , @piersg , @alyssamwilie , @Jake_Lett , @jpsanchez 

You know this guy 😺.  do you have some thoughts for him 👀