Login to Splynx from provider site

Resources Tutorials
6

If you’re trying to embed the Splynx login in your own website (for branding, seamless customer UX, etc.), here’s what you need to know:

1. Twig/Template Customizations Are Dead

If you’ve used Splynx for a while, you might remember being able to override portal Twig templates directly (e.g. login.twig).
That’s no longer possible in recent Splynx versions!
The login page is now locked down; direct Twig or template overrides won’t work. (I spent hours on this—don’t bother.)

2. The Only Real Solution: Use the Add-On Module System

I opened a support ticket, and Splynx support confirmed:

“The best option for changing the customer portal is through the add-on entry points. You can create a new add-on on your Splynx instance and set the appropriate entry points with the corresponding style customization.”

image
image1713×894 54.9 KB

Steps:

  1. Go to Integrations → Install module
  2. Fill in Main Info:
  • Module name, title, type (Add-on)
  1. Add an Entry Point:
  • Place: Customer portal
  • Type: Code
  1. Set Point:
  • Root: Login (or the page you want)
  • Placement: Before content (or as needed)
  1. Add your CSS/JS:
  • Insert your <style>...</style> or <script>...</script> in the code box
  • Example: Hide parts of the default login, override styles, etc.
  1. Click Install

3. Embedding in Your Website: Use an iFrame

  • Since direct template overrides are impossible, the only way to embed the login in your external website is via an <iframe> pointing to the login page.
  • The catch? The default Splynx portal layout is NOT made for embedding—so you must:
    • Use your module add-on to hide everything except the form
    • Override padding, backgrounds, etc. with CSS injected from the module
    • Style the login fields to match your branding

To embed the cleaned-up login page in your site:


`<iframe
  src="https://admin.yourisp.com/portal/login?iframe"
  width="100%"
  height="200"
  style={{
    border: "none",
    borderRadius: 0,
    display: "block",
    margin: 0,
    padding: 0,
    overflow: "hidden",
    background: "transparent",
    width: "100%",
  }}
  scrolling="no"
  title="Customer Login"
/>
`

4. Challenges & Solutions

a) Hiding Unwanted Portal Content

  • Use your entry-point module’s <style> block to hide logos, footers, backgrounds, and right-side shapes.
  • Use display: none !important; on all unnecessary elements.

b) iFrame Sizing & Responsiveness

  • On your own website, make your iframe width 100%, no border/padding.
  • On mobile, use CSS transforms to visually scale down the login form so it doesn’t get cut off.
  • Tweak both iframe and card container styles for perfect pixel matching.

c) Maintenance

  • Whenever Splynx updates their portal, double-check your add-on still works! Some class names or element structures may change.

5. Final Tips

  • Do not attempt to override templates or upload custom Twig files—they will not load.
  • All real customization is done through the module entry-point system as described above.
  • For mobile-friendliness: Use external CSS on your site to visually scale the iframe contents for smaller screens.

image
image1424×841 45.1 KB

Summary:

Twig overrides are dead. Use the add-on entry point system to inject custom CSS/JS, hide everything but the form, and use an iFrame to embed in your site.

1 Like