Home

SILK Wrapper

The SILK wrapper allows Localist to apply the same header, footer, and styles to every calendar page which translates to a seamless experience for your users (they won’t even know they’re using a third party platform). The added advantage is if links change in your header and footer, you won’t need to mirror those changes in Localist; they’ll just happen. In this article you’ll find:

  • Template Clean Up Steps
  • Adding Wrapper Comments
  • Configuring a SILK Wrapper in Localist
  • Customer Examples

Template Clean Up Steps

Start by identifying the wrapper source you would like to use then follow these steps:

  • Remove body content

    All content specific to the page (body) should be removed, so only the head, header and footer remain.

  • Remove title tags

    These are automatically added by Localist.

  • Remove jQuery references

    This is automatically added by Localist.

  • Remove Google Analytics reference

    This is added by Localist when you specify your UA number in Global options.

  • Make all URLs absolute

    Ensure all references to CSS, JavaScript, images, etc., use complete URLs.

  • Responsive Design

    If your wrapper does not support responsive design, you must uncheck Responsive Design in Global Options.

  • Non-absolute URLs: /external/wcpages/styles/styles.css
  • Absolute URLsyourdomain.com/external/wcpages/styles/styles.css

SILK Wrapper Design

What do you get when you combine your vision + our technical chops? A seamlessly branded visitor experience. Enter your email address to connect with your Customer Success Manager to learn more about our SILK Wrapper design services.

*

Adding Wrapper Comments

When adding comments to your wrapper file, you must adhere to the following requirements:

  • Comments must be on their own line.
  • Comments must use double dashes and not emdashes.
  • Comment names (head_tags) must remain lower case. 

Directly after the opening <head>
<!-- LOCALIST COMMENT - START head_tags -->
…your styles/CSS/JS/etc. will be here.
Directly before the closing </head>
<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->

Directly after the opening <body>

<!-- LOCALIST COMMENT - START before_grid -->
your header code will start here.

Directly after the closing </header>

<div class="content-wrapper">
<div class="wrapper">
<!-- LOCALIST COMMENT - END before_grid -->

<!-- LOCALIST COMMENT - START body -->

<!-- LOCALIST COMMENT - PLACEHOLDER user_menu -->

<!-- LOCALIST COMMENT - PLACEHOLDER search_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER top_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER content -->

<!-- LOCALIST COMMENT - END body -->

<!-- LOCALIST COMMENT - START after_grid -->

</div>

</div>
…your footer code will start here.

Directly before the closing </body>

<!-- LOCALIST COMMENT - END after_grid -->

Configuring a SILK Wrapper in Localist

  • Start by logging into your Admin Dashboard

    Navigate to Settings > Appearance

  • Add your wrapper URL to the SILK Wrapper URL field

    The URL must be publicly accessible.

  • Save Changes

    Once you select Save Changes a “Refresh Wrapper” link will appear under the wrapper field.

  • Refresh Wrapper

    Select the “Refresh Wrapper” link to officially import your new branding. Localist will refresh your wrapper once every 24 hours automatically, but if you need to force an update in the future this link will do the trick.