Jak dodać stopkę do wiadomości mail wraz z grafiką – logo firmy?

Dziś chciałbym pokazać Wam w jaki sposób dodać stopkę do maila, która zawiera dodatkowo grafikę. Wydawałoby się, że jest to prosta czynność, aczkolwiek może przysporzyć nam ona nieco kłopotu. Problem w tym przypadku może stanowić grafika, którą chcemy załączyć do naszej wiadomości.

Wstawianie stopki z grafiką w programie pocztowym.

W przypadku kiedy korzystamy z programu pocztowego nie stanowi to żadnego problemu ponieważ grafikę, którą wstawiamy do wiadomości mamy na swoim dysku twardym i jest ona wysyłana razem z mailem do odbiorcy. Wystarczy podać kod taki jak poniżej w postaci HTML gdzie obrazki mogę być podane z lokalnego HDD lub z serwera.

Zadanie:

Dodać stopkę zawierającą:
– imię nazwisko,
– dane firmy,
– adres mailowy (po kliknięciu ma się uruchomić program pocztowy),
– adres strony internetowej (po kliknięciu ma się otwierać strona w nowym oknie),
– logo firmy w postaci grafiki (po kliknięciu otworzy się strona firmowa).

Wstawianie stopki z grafiką za pomocą kodu HTML w wiadomości mail, gdy korzystamy poprzez www.

Logujemy się na swoje konto poprzez przeglądarkę www. Miejsce, w którym możemy wstawić stopkę, sygnaturę. W moim przypadku w Ustawieniach.

Problem zaczyna się, gdy korzystamy z poczty poprzez stronę www, wtedy możemy nie mieć możliwości dołączenia do stopki grafiki, a jedynie tekst lub kod html.

[wp_ad_camp_1]

W takim przypadku, aby dołączyć obraz do naszej stopki w wiadomości musimy użyć kodu html oraz posiadać serwer, na którym możemy przechowywać pliki graficzne, do których będziemy się odwoływać w html-u.

<!--Wystarczy podmienić dane na swoje.-->
<!--Tworzymy kontener na zwrot z szacunkiem oraz Podpis z telefonem-->
<div>
	Z poważaniem<br/>
	<strong>[Imię Nazwisko]</strong><br/>
	tel.: [+48 123 123 000]<br/>
</div>
<!--oddzielamy podpis linią poziomą-->
<div><hr/></div>
<!--nowy kontener na obrazek z linkiem a także na dane firmy tj. nazwę, adres oraz e-mail->
<div>
	<!--podajemy gdzie będzie linkować obrazek oraz, że ma się otworzyć w nowym oknie-->
	<a href="https://wicket.eu" target="_blank">
	<!--podajemy adres naszego obrazka na serwerze oraz opis-->
	<img src="https://wicket.eu/wp-content/uploads/2015/09/g-.png" alt="G+" /></a>
	[Nazwa firmy]<br/>
	[Adres firmy]<br/>
	tel.: [+48 987 123 000]<br/>	
	<!--Podajemy adres mailowy w postaci łącza na który będzie można posłać wiadomość-->
	e-mail: <a href="mailto:[adres@mail.com]">[adres@mail.com]</a><br/>
	<!--Podajemy adres strony w postaci linka-->
	www: <a href="http://www.wicket.eu" target="_blank">[wicket.eu]</a><br/>
</div>

i otrzymamy:

[Nazwa firmy]
[Adres firmy]
tel.: [+48 987 123 000]
e-mail: [adres@mail.com]
www: [wicket.eu]

Dodawanie stopki w wiadomości gdy nie mamy serwera, na którym przechowujemy pliki.

Istnieje jeszcze jedno rozwiązanie, którego możemy użyć jeśli nie posiadamy serwera, na którym możemy trzymać pliki graficzne. Mam tu na myśli zakodowanie obrazków w algorytmie Base64 i dołączenie otrzymanego kodu do stopki napisanej w HTML. Wadą tego rozwiązania jest to, że nie zawsze taka stopka może zostać zdekodowana przez odbiorcę np. jeśli odbiorca korzysta z poczty poprzez www i używa np. IE6 lub IE7.

Pliki grafiki możemy zakodować na stronie http://www.base64-image.de wchodzimy i podajemy plik a po chwili otrzymamy kod do wklejenia do naszej stopki.

<pre class="lang:HTML" title="Stopka w HTML">
<!--Wystarczy podmienić dane na swoje.-->
<!--Tworzymy kontener na zwrot z szacunkiem oraz Podpis z telefonem-->
<div>
	Z poważaniem<br/>
	<strong>[Imię Nazwisko]</strong><br/>
	tel.: [+48 123 123 000]<br/>
</div>
<!--oddzielamy podpis linią poziomą-->
<hr/>
<!--nowy kontener na obrazek z linkiem a także na dane firmy tj. nazwę, adres oraz e-mail->
<div>
	<!--podajemy gdzie będzie linkować obrazek oraz, że ma się otworzyć w nowym oknie-->
	<a href="https://wicket.eu" target="_blank">
	<!--podajemy adres naszego obrazka na serwerze oraz opis-->
	
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAMAAADU1xmCAAAAkFBMVEX////dSznaMxjcQCrutK/cRzTdSTbcRDDcRjLdTDrusKv++fncQy/eUUDbPijZJQD32NT87uzgXEz539z65+Tuq6T1zcjiaVzxwLvkdWjwurXojoT65ePYEAD99fT0xsHlf3Xsn5ftpp7hZFTql43oiX7gWEflem7jb2LplIrjcWbpjYHaLxDiZ1jsoZr308+Aw6KLAAADGUlEQVRYhe2X25KjIBCGRQLiifFsNG6iJmqcncT3f7sFMpP1VBNld6v2wv/KEPzq76ZpUFE2bdq06V/IDMrG06j61MeHdnHlWO4+VqGuIwK4dF0HuD74ksaihoKq3O3ujY457VaE5V6SpRg19EIRVXCvGQ57O1kUg1nIDj+fzZKHim1pZycba9XvfCc8d8g7ysGCdwL0sPdb5e6sVo52JyxPUW9AmANUCuYzayjuF4NDBe0kQ9vrYEQz+bICq5ChGRZbwrPTpx00RtMqCdix4DRvENaeh6rlEjS35UZ0oz/mQ077KePtYvFXL/2xTOStlKCJvAF06ycu45uVOoNpP9Q3Q3ktvqYM15/KvWF9OE0FcMne9UWxkiTrDbG8wZGThTQlFOZIaD5HUgis3BzOWkpzG24O18+uYd6Q9T7ulEtpSuAhnrk6/fzdEuvqjCctpikZ1Vjekd7yttQlxEqmPZzR0umbszrmNiYIQRXZkBJ07a0IKw0h5h6KhyWF4lzy9/h8E/vdHpgQ3a6nhQG7fhddEW8Bg+E3KMSXXTyoS4pYKBCFPKQZOy5WNKRK+ZOx+Fz0qThh5vrkilX4UmaJAyue1MeaCnkquCER6637GzQlwmLdCJlEtZpmuq7TCHMAw53kPhUKnG5fVsnVQ/gTN2qWb8tLIzJyz1JVrT7Hcf24JgE6tGIsLY3o4lkQnttT5/i+71T04W62UF7JvZ8J0prI/bp4HEsqokXN+rtgkGOMyTAlERYdz15dEm7Cu/Y4Jj9GUqd9SWdPTp9vf61aeesK+NFMZvKTst5EmmAdrYB8W5rTP46sjEmTTf/4Trw7kmaGprTMW75yUXlpzdOK8XVigXibxt48DYNwZvw7iX5G57ZMhdB15SIoV3H/Pk/NsYrDa60pJyiOoWKcbrPFcHx3eC3zIHBo9El1LGsrXhsnU5aI1KFr2ONFB5smM2fDa/nNw50eV0Xa+X6XFqzX0XZl4X7peIEWxgAjhG27rm0dQepJfSs8FBw8m9EI0TSCgO3l0et3vlVUtlWV53l1Cf8UtWnTpv9LvwCBRy3ZEtY1IwAAAABJRU5ErkJggg=="/>

</a>
	[Nazwa firmy]<br/>
	[Adres firmy]<br/>
	tel.: [+48 987 123 000]<br/>	
	<!--Podajemy adres mailowy w postaci łącza na który będzie można posłać wiadomość-->
	e-mail: <a href="mailto:[adres@mail.com]">[adres@mail.com]</a>
	<!--Podajemy adres strony w postaci linka-->
	www: <a href="http://www.wicket.eu" target="_blank">[wicket.eu]</a><br/>
</div></pre>

Otrzymamy identyczną stopkę:

[Nazwa firmy]
[Adres firmy]
tel.: [+48 987 123 000]
e-mail: [adres@mail.com]
www: [wicket.eu]