Laravel 5.4 mail markdown 2 button inline

Question

I would like to know how to place the button next to each other.

Now it is on a separate line.

@component('mail::message')
    Dear {{$vendor_name}}

    Product {{$product_id}} : {{$product_name}} price id : {{$price_id}} will expire on {{$date_expire}}.
    Please renew price.


@component('mail::button', ['url' => 'http://phuketjettour.com/', 'color' => 'green'])
    Phuket Jet Tour
@endcomponent
@component('mail::button', ['url' => 'http://phuketjettour.com/s/vendors'])
    Vendor submission
@endcomponent
    Thanks,<br>
    Phuket Jet Tour

@endcomponent

Answer 1

Dynamic number of inline buttons

For me the following worked to create 2, 3, 4 (dynamic number) of buttons inline in Laravel markdown mails:

1) Add a new directory for your custom component

First lets extend the mail configuration to include our new directory for components:

config/mail.php

<?php 

// ...

'markdown' => [
    'theme' => 'default',

    'paths' => [
        resource_path('views/vendor/mail'),
        resource_path('views/emails/components') // <-- This line was added
    ],
],

2) Create the new component for inline buttons

You need to create both, the HTML and the text version of the component. Otherwise you will get a InvalidArgumentException "View $name not found":

www/resources/views/emails/components/html/buttons.blade.php

This is the HTML file:

<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
@if(null !== ($headline ?? null))
<tr><td><h2 style="text-align: center;">{{ $headline }}</h2></td></tr>
@endif
<tr>
<td>
@foreach($buttons as $button)
<a href="{{ $button['url'] }}" class="button button-{{ $button['color'] ?? 'primary' }}" target="_blank" rel="noopener">{!! $button['slot'] !!}</a>
@endforeach
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

www/resources/views/emails/components/text/buttons.blade.php

This is the text file

@if(null !== ($headline ?? null))
{{ $headline }}
------------------------------
@endif
@foreach($buttons as $button)
{!! $button['slot'] !!}: {{ $button['url'] }}
@endforeach

3) Include the new component in your mails:

Now you can just include the component in your markdown emails like so:

Example with 2 inline buttons and a headline:

@component('mail::buttons', [
    'headline' => 'Share link',
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
        ]
    ]
])
@endcomponent

Example with 3 inline buttons without a headline:

@component('mail::buttons', [
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
        ],[
            'url' => 'https://twitter.com/intent/tweet?text=' . urlencode('Twitter text'),
            'slot' => 'Twitter',
        ]
    ]
])
@endcomponent

Example with 3 inline buttons with different colours:

@component('mail::buttons', [
    'buttons' => [
        [
            'url' => 'https://wa.me/?text=' . urlencode('Whatsapp text'),
            'slot' => 'WhatsApp',
            'color' => 'blue' // This is the default
        ],[
            'url' => 'https://t.me/share/url?text=' . urlencode('telegram text'),
            'slot' => 'Telegram',
            'color' => 'green'
        ],[
            'url' => 'https://twitter.com/intent/tweet?text=' . urlencode('Twitter text'),
            'slot' => 'Twitter',
            'color' => 'red'
        ]
    ]
])
@endcomponent

Answer 2

I have done it like this, ofcourse the css should be in a separated file

<style>
    .email-row {
    }
    .email-col-2 {
        width: 49%;
        display: inline-block;
    }
</style>

@component('mail::message')
<div class="email-row">
    <div class="email-col-2">
        @component('mail::button', ['url' => '453634', 'color' => 'light'])
            btn1
        @endcomponent
    </div>
    <div class="email-col-2">
        @component('mail::button', ['url' => '123', 'color' => 'green'])
            bnt2
        @endcomponent
    </div>
</div>

@endcomponent

Answer 3

When passing a variable to a blade template, use a single quote ( ' ) instead of a double quote ( " ).

$btn_style = " color: #FFF; border: 1px solid #FEFEFE; padding: 5px 30px;";    
$buttons = '<span style="text-align: center; width: 100%; display: inline-block;">
                <a href="'. url('/login') .'" style="background: #449a44; '.$btn_style.'"> Accept </a>
                <a href="'. url('/some/url/'. $id) .'" style="background: #b76161; '.$btn_style.'"> Decline </a>
            </span>';

To render this code:

Edit your App\Mail

$this
    ->subject('Subject')
    ->markdown('emails.tempalte')
    ->with([
      'buttons' => $buttons,
    ]);

Blade Template view\emails:

{!! $buttons !!}

Hope this helps.

Answer 4

you can put it in one <div> For example:

<div class = "row>

your buttons here

</div>

If it doesn't help please share your code

---

Try this:

<span style="display: inline;">

@component('mail::button', ['url' => 'http://phuketjettour.com/', 'color' => 'green'])
    Phuket Jet Tour
@endcomponent
@component('mail::button', ['url' => 'http://phuketjettour.com/s/vendors'])
    Vendor submission
@endcomponent

</span>

Answer 5

It's just a work around. I've inspect the email from a laravel project.

try this in place of your component for button :

<a href = "http://phuketjettour.com/" class="button button-green"> Phuket Jet Tour</a>
<a href = "http://phuketjettour.com/" class="button button-blue">SAMPLE !</a>

it inlines your button. then just adjust other element. If you want to put the button on the markdown then you do like:

On your markdown:

$button1= "   <a href = "http://phuketjettour.com/" class="button button-green"> Phuket Jet Tour</a>";
$button2 = "<a href = "http://phuketjettour.com/" class="button button-blue">SAMPLE !</a>";

  $emailMarkdown = $this->markdown('your_email_template')
                ->subject('your_subject)
                //you will define here the variables you need to pass in the template
                ->with([    
                   'emailBody' => $emailBody,
                   'button_first' => $button1,
                   'button_second' => $button2,
                ]);

     return $emailMarkdown;

then on the email template:

@component('mail::message')
        Dear {{$vendor_name}}

        Product {{$product_id}} : {{$product_name}} price id : {{$price_id}} will expire on {{$date_expire}}.
        Please renew price.

    {!!$button_first!!} {!!$button_second!!}
@endcomponent

Answer 6

To fix the issue, just place this code in email blade file:

<div style="text-align: center">
  <a href="{{ $link }}" class="button button-red">Cancel</a>
  <a href="{{ $link }}" class="button button-blue">Reschedule</a>
  <a href="{{ $link }}" class="button button-green">Confirm</a>
</div>