The Marketer's Toolkit Support Center
All Categories GHL Customizer Setup GHL Customizer Setup (Part 1b): If you already have existing users, customers, or custom JS/CSS installed

GHL Customizer Setup (Part 1b): If you already have existing users, customers, or custom JS/CSS installed

How to set up the GHL Customizer if you have existing users, customers, or custom JS/CSS installed.

By Client Success
February 1, 2024

  1. Click the "Preview Mode Code" text in the top area of the GHL Customizer dashboard. This will open a popup on your screen.

    Preview-Mode-Code.png

  2. Click the code snippet in the popup to copy it, then click the "OK" button to close the popup.

    Preview-Mode-Code-Popup-Screen.png

  3. Open your HighLevel in a separate browser tab.

    Paste the code into your Agency View > Settings > Company > Custom Javascript field.

    Then click the blue "Update Company" button and refresh your HighLevel browser tab.

    Agency-View-Settings-Custom-Javascript.png

  4. Switch over to your GHL Customizer browser tab.

    Hover your mouse pointer over the "GHL White Label" area of the orange field on the GHL Customizer dashboard.

    When you do, a "click to edit" button will appear. Click it.

    Set-the-GHL-White-Label-domain.png

  5. Enter your custom white-label domain, then click the green "Save" button.

Screen-Shot-2024-01-26-at-6.17.24-PM.png

  1. Click the "Preview Mode" button.

    This will open a new browser tab with your HighLevel account in it. You’re now connected to the GHL Customizer "Preview Mode".

    Any customizations you make within the GHL Customizer tab can be seen when you refresh the "Preview Mode" tab you just opened.

    Click-Preview-Mode-button.png

    Note: This "Preview Mode" tab should only be used to preview/test your GHL Customizer customizations, and nothing else. When you are done previewing/testing, you can close the "Preview Mode" tab by clicking on the "Exit" button at the bottom of the screen, then closing the browser tab.

    GHL-Customizer-Preview-Mode.png

  2. Switch back over to the GHL Customizer tab and start experimenting with the different features until you like what you've created.

    Remember to switch between the GHL Customizer and "Preview Mode" tabs (or you can set up a side-by side view on your monitor(s)) to observe your edits.

  3. When you are happy with your GHL Customizer customizations and ready to go live for everyone who uses your HighLevel, you will need to remove/delete the GHL Customizer "Preview Mode" code snippet from your HighLevel Custom Javascript field.

    Then copy the GHL Customizer code snippet from the GHL Customizer dashboard.

    Copy-the-GHL-Customizer-javascript-snippet.png

  4. Paste the GHL Customizer code snippet into your HighLevel Agency View > Settings > Company > Custom Javascript field.

    Then click the blue "Update Company" button.

    Theme-Builder-Remove-CSS.png

    NOTE: You may want to remove any pre-existing Custom CSS as this may interfere with the GHL Customizer script. If you use your own code or code from 3rd party service providers and you experience any issues, please submit a Support Ticket.

  1. In the GHL Customizer dashboard, click the blue "Publish to live" button at the top-right, and you’re done!

    Remember to refresh the 'live' HighLevel browser tab (not the "Preview Mode" browser tab) to see your published customizations live.

    Publish-to-live.png


Learn more about Preview Mode:
https://help.themarketerstoolkit.com/article/26/preview-mode-export-settings

Learn more about the GHL Customizer features:
https://help.themarketerstoolkit.com/category/6/ghl-customizer-features

Was this article helpful?

Thanks for your feedback!