Mindbody login code snippet into nav

Site URL: http://www.goodtimepilates.com/

Hi all,

I'm trying to add a code snippet that allows users to login into their Mindbody profiles into my squarespace via the top nav, using the method prescribed by the Mindbody directions here or this YouTube video here (both are the same directions). When I follow the directions (adding a link, pasting <script src...> into Link Title, putting placeholder url in Link), instead of a clickable text appearing that reads Login | Register, I get the "<script>" tag pushing everything aside (screenshot below), essentially Squarespace can't parse the code and is displaying it directly as is. Any idea why? 

Thank you!

Can you post mindbody code? We can help easier

@tuanphanthanks, it's below, but my hunch is Squarespace's version is now 7.1 and the instructions given by Mindbody is for v7.0, that might be the culprit. Happy to add any other info for troubleshooting. 

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="100795" data-mb-site-id="658429" data-type="account-link" data-inner-html="Login | Register"  />

On 4/27/2021 at 6:33 AM, simacna said:

@tuanphanthanks, it's below, but my hunch is Squarespace's version is now 7.1 and the instructions given by Mindbody is for v7.0, that might be the culprit. Happy to add any other info for troubleshooting. 

 

 

 

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="100795" data-mb-site-id="658429" data-type="account-link" data-inner-html="Login | Register"  />

Can you check your site url? I can't access it.

@tuanphanwhoops, fixed it! it's www.goodtimepilates.com

@tuanphan Right now on the live website, for the registration I have it just as a link to another site. I'd like that to be a login button that works as a model (which happens if it embed the <iframe> i posted above into a <code> block and according to the instructions in the the link above, should work in the hacky way for squarespace v7.0 but I'm on v7.1 😞

They mention v7.1 on the instructions page and how to get it working for v7.1 if you have trouble.

When I ran the code it put up a Login / Register on the screen.

Thanks for checking @creedon and they're right, the adding a calendar works, my issue is adding a Login|Register button on the navigation (https://support.mindbodyonline.com/s/article/Putting-a-Login-Register-link-in-the-navigation-on-SquareSpace-7-branded-web-tools-formerly-HealCode?language=en_US) which asks the <iframe> to be place in the Text field, this is where the parsing issue happens. Can you replicate the functionality on your Squarespace v7.1 too? That'd be amazing.

The method MB described will not work for v7.1.

They took advantage of an unintentional method of slipping code into a place where SS didn't intend in v7.0. SS fixed that in v7.1.

I have a solution for v7.1. It requires the business plan or above.

Please see Header Navigation Mindbody Login or Register Links Add.

Let us know how it goes.

@creedon thank you! look at that, jQuery back to the rescue 🙂 I can add css styling and make it look how I want, but this brings it onto the page, grateful!

On 4/29/2021 at 1:20 PM, creedon said:

The method MB described will not work for v7.1.

They took advantage of an unintentional method of slipping code into a place where SS didn't intend in v7.0. SS fixed that in v7.1.

I have a solution for v7.1. It requires the business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      add mindbody login register link to navigation
      
      Version    : 0.1d0
      
      SS Version : 7.1
      
      By         : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const dataSiteId = '100795';
    
    const dataMbSiteId = '658429';
    
    // do not change anything below, there be the borg here
    
    $( '<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"><\/script>' +
      
      '<healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="' + dataSiteId + '" data-mb-site-id="' + dataMbSiteId + '" data-type="account-link" data-inner-html="Login | Register" />' )
    
      .appendTo ( '.header-nav-list, .header-menu-nav-folder-content' );
      
    $( 'healcode-widget:first' )
    
      .addClass ( 'header-nav-item header-nav-item--collection header-nav-item--active' )
      
      .attr ( 'data-animation-role', 'header-element' );
      
    $( 'healcode-widget:last' )
    
      .addClass ( 'container header-menu-nav-item header-menu-nav-item--collection' );
      
    } );
    
  </script>

This is for v7.1.

Let us know how it goes.

This works for me! But now it's affecting other widgets on my site. 😞

On 8/26/2021 at 6:17 AM, lindz5223 said:

This works for me! But now it's affecting other widgets on my site. 😞

Can you share link to your site? Which widget you want the code affect on?

On 8/26/2021 at 9:17 AM, lindz5223 said:

This works for me! But now it's affecting other widgets on my site. 😞

@lindz5223 did you find a solution? I'm getting the same.

I did this code solution and it works. I have used it on two different sites. So far so good, and no conflicts. @lindz5223 I see you didn't use the code due to conflicts. Can you share more info?

My question. with the code @creedon created. How do I place the "Register" text to the left of the shopping car icon? Or at least on the same line as the menu. It puts it below the centered menu. Thank you!

https://www.providencepilatescenter.com/

Best,

Scott

On 3/10/2022 at 1:28 PM, indy said:

My question. with the code @creedon created. How do I place the "Register" text to the left of the shopping car icon?

My code won't do that. Could it be altered to perhaps do it? Maybe but that area of the header looks less forgiving for adding elements in. The navigation is a natural area as it was designed to accommodate a different number of elements.

Quote

Or at least on the same line as the menu. It puts it below the centered menu.

The wrapping is occurring because that area of the header is divided into 3 equal spots. When the navigation element exceed its 1/3 allocation of space the items wrap. You can turn that wrapping off but there may be unintended consequences.

Add the following to Design > Custom CSS.

.header-layout-nav-center .header-nav-list {

  flex-wrap : nowrap;
  
  }

This is for v7.1.

Let us know how it goes.

@creedon thank you! It worked. The client decided to keep it below the menu items. I appreciate your help and I also messaged you. Thanks!

On 4/29/2021 at 6:20 PM, creedon said:

The method MB described will not work for v7.1.

They took advantage of an unintentional method of slipping code into a place where SS didn't intend in v7.0. SS fixed that in v7.1.

I have a solution for v7.1. It requires the business plan or above.

Please see Add Mindbody Login Register Link to Navigation.

Let us know how it goes.

Hi there - firing up this question/solution again. This post is a bit of a mess sorry!

• I'd like to Login | Register in the main nav only...any thoughts on what I am doing wrong? 
• The Login | Register then disappears from the Main navigation but still appears very far down in the left corner. 

MY SITE: https://www.wearefixology.co.uk/book
PASSWORD: ruth

I've followed your steps: 

Header code:  <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 

However when I add the footer code - my calendar starts overlapping with random large bits of font - see attached. 

<script>$( ( ) => { 

 const dataSiteId = '[5728933]'; 

const dataMbSiteId = '[5728933]';     

// do not change anything below, there be the borg here 

    $( '<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"><\/script>' + 

      '<healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="' + dataSiteId + '" data-mb-site-id="' + dataMbSiteId + '" data-type="account-link" data-inner-html="Login | Register" />' ) 

    .appendTo ( '.header-nav-list, .header-menu-nav-folder-content' ); 

    $( 'healcode-widget:first' ) 

      .addClass ( 'header-nav-item header-nav-item--collection header-nav-item--active' ) 

      .attr ( 'data-animation-role', 'header-element' ); 

    $( 'healcode-widget:last' ) 

      .addClass ( 'container header-menu-nav-item header-menu-nav-item--collection' ); 

    } ); 

And this is my MINDBODY code:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="110636" data-mb-site-id="5728933" data-bw-identity-site="false" data-type="account-link" data-inner-html="Login | Register"  />

@TechyBecky_101

You have syntax errors in the code you show. To start...

You need a space between script and src.

No square brackets.

Let us know how it goes.

Hmm that's not worked. It;s not affected the layout but Login | Register isn't in the header or footer at all now...

I really appreciate you picking up this old thread 🙂

13 hours ago, TechyBecky_101 said:

Login | Register isn't in the header or footer at all now...

There are still syntax errors in the code. I suggest pasting in the my original code without editing out the blank lines and such. When you edit the code like that you risk breaking it.

14 hours ago, creedon said:

There are still syntax errors in the code. I suggest pasting in the my original code without editing out the blank lines and such. When you edit the code like that you risk breaking it.

Perfect - works a treat. Thanks so much 🙂

The code worked, but now the other widgets on the site are being affected. How do I go about updating the code to not change my client's other widgets? The issue is on the events page, here is the link https://www.midlandyogaworks.com/adults

4 hours ago, laurenh432 said:

but now the other widgets on the site are being affected. How do I go about updating the code to not change my client's other widgets?

I have updated my cited code in my April 29, 2021 post.

From the changes...

• only load script once and only if needed
• fix for code messing up the layout of other mb widgets

Let us know how it goes.

@lindz5223