New Member
Posts: 12
Registered: ‎11-17-2017
Kudos: 5
Accepted Solution

Login Button on Invoice

Hello,

 

How do we add a login button to our invoices? We have created a clone of the default invoice template. We can see the code to edit, now we need a code snippet to add a LOG IN button with a link to our UCRM billing system. Can anyone help with this?

 

Thank you,

Dan Pattison

Uplink Internet LLC

 

 


Accepted Solutions
Member
Posts: 294
Registered: ‎11-18-2009
Kudos: 73
Solutions: 8

Re: Login Button on Invoice

[ Edited ]

@UplinkInternet,

 

You could simply add this on the template where you would like it, I tested under the organization stamp code.

 

    {% if organization.stamp %}
        <table class="stamp">
            <tr>
                <td>
                    <img src="{{ organization.stamp }}">
                </td>
            </tr>
        </table>
    {% endif %}
  
    <!-- Added Client Login Button -->
    <a href="https://ucrm.dev.mvqn.net/login" class="login-button">Login</a>
</div>

Obvisouly, change the href to your own UCRM URL and the "Login" Text as desired.

 

Then add at the end of the CSS for the same template, something like this:

 

.login-button {
    display: inline-block;
    background-color: #00a0df;
    color: #fff;
    padding: 0.5rem;
    text-decoration: none;
}

 

Again, this can be changed to suit your needs, but tested working on the latest beta8, but should work exactly the same on all other versions.

 

Let me know if this doesn't work out for you.

View solution in original post


All Replies
Member
Posts: 294
Registered: ‎11-18-2009
Kudos: 73
Solutions: 8

Re: Login Button on Invoice

[ Edited ]

@UplinkInternet,

 

You could simply add this on the template where you would like it, I tested under the organization stamp code.

 

    {% if organization.stamp %}
        <table class="stamp">
            <tr>
                <td>
                    <img src="{{ organization.stamp }}">
                </td>
            </tr>
        </table>
    {% endif %}
  
    <!-- Added Client Login Button -->
    <a href="https://ucrm.dev.mvqn.net/login" class="login-button">Login</a>
</div>

Obvisouly, change the href to your own UCRM URL and the "Login" Text as desired.

 

Then add at the end of the CSS for the same template, something like this:

 

.login-button {
    display: inline-block;
    background-color: #00a0df;
    color: #fff;
    padding: 0.5rem;
    text-decoration: none;
}

 

Again, this can be changed to suit your needs, but tested working on the latest beta8, but should work exactly the same on all other versions.

 

Let me know if this doesn't work out for you.

Member
Posts: 294
Registered: ‎11-18-2009
Kudos: 73
Solutions: 8

Re: Login Button on Invoice

@UplinkInternet,

 

To be honest though...

 

The dompdf library does not seem to be able to handl the option of hiding the button during printing, as opposed to simply displaying.  At least not using standard CSS media selectors, and as far as I can tell, not really at all from online sources.

 

So, my recommendation would likely be to include a link in the "New Invoice" email template instead and the actual invoice template.

 

Just my two cents!

 

Highlighted
New Member
Posts: 12
Registered: ‎11-17-2017
Kudos: 5

Re: Login Button on Invoice

Thanks for the code snippet, we got it working!

 

Regards,

Dan