mailgo

mailgo

  • docs
  • demo
  • browser extensions
  • GitHub

›Installation

Installation

  • Installation
  • React / Angular / Vue / Hugo
  • Next.js
  • GatsbyJS
  • TypeScript
  • WordPress
  • Magento 2
  • Browsers support
  • Skypack

Usage with mailto

  • Usage for mailto
  • Cc, bcc, subject, body
  • Keyboard commands
  • Multiple email addresses

Usage with tel

  • Usage for tel
  • Telegram
  • WhatsApp
  • Skype

Configuration

  • Configuration
  • Dark mode

Examples

  • Examples with mailto links
  • Examples with tel links

Style and a11y

  • Style and Accessibility in mailgo
  • Responsive
  • No style

Advanced / Other

  • Direct render
  • Library export(s)
  • Window functions

i18n

  • i18n in mailgo
  • Contribute in mailgo i18n

Browsers extensions

  • Browsers extensions
  • Google Chrome
  • Firefox

By the community

  • Integrations
Edit

Mailgo in React / Angular / Vue / Hugo

React

First way (recommended)

Install mailgo through

npm install mailgo

or

yarn add mailgo

and then

import mailgo from "mailgo";

and then you can call

mailgo();

to initialize mailgo.

You can customize mailgo installation with an optional config parameter. See Configuration section to use config object. Just pass it as a parameter of mailgo function.

BREAKING CHANGES from version 0.10.*: you can also use

const Mailgo = require("mailgo");

but then you have to call

Mailgo.start();

Second way

Install mailgo through

npm install mailgo

or

yarn add mailgo

and then just

import "mailgo/dist/mailgo.min.js";

or

require("mailgo/dist/mailgo.min.js");

in App.js, index.js or any other root component.

No configurations are allowed directly, except for Configuration in window.

React examples

You can see a React complete example of using mailgo (in particular using create-react-app) in this repository: https://github.com/manzinello/create-react-mailgo-app, and here a create-react-app example deployed called create-react-mailgo-app: https://create-react-mailgo-app.mailgo.dev.

Next.js

See the detail in Next.js section

Angular

Install mailgo through

npm install mailgo

or

yarn add mailgo

then add mailgo to your .angular-cli.json in this way

"styles": [
    "..."
],
"scripts": [
    "..."
    "../node_modules/mailgo/dist/mailgo.min.js"
    "..."
]

Vue

Install mailgo

npm install mailgo

or

yarn add mailgo

and then import mailgo

import mailgo from "mailgo";

into main.js, and then you can call

mailgo();

to initialize mailgo.

Vue examples

Here a repository of a project created through vue-cli using mailgo: https://github.com/manzinello/vue-mailgo

Here the same example deployed: https://vue-mailgo.mailgo.dev

Hugo

Standard installation methods are supported. The simplest solution is to install mailgo into one of your content files (a post or page) using the CDN method since anything added in the content markdown file is included in the content page body on site generation.

---
# page front matter
---

<!-- content -->

<!-- usage -->
<a href="#mailgo" data-address="matteo" data-domain="manzinello.dev">write me!</a>

<!-- install -->
<script src="https://unpkg.com/mailgo@0.11.2/dist/mailgo.min.js"></script>

Hugo 0.60.0 and higher

Hugo changed its default markdown library to Goldmark in its 0.60.0 release. The use of inline HTML is no longer supported by default. You must update your site config for mailgo to function as an inline HTML element.

config.toml sample - more info on the Hugo blog

[markup.goldmark.renderer]
      unsafe = true

Partial templates and shortcodes

In Hugo, you can create a partial template for mailgo to include it in the head of every page, or you can write a custom shortcode for insertion into individual content pages.

Here is a sample use of a custom shortcode that includes the mailgo icon - original gist

layouts/shortcodes/mailgo.html

{{ if .Get 1 }}
  <a href="#mailgo" data-address="{{ .Get 0 }}" data-domain="{{ .Get 1 }}">
    <img src="/icon/mailgo.png" {{ with .Get 2 }} height="{{ . }}" {{ end }}/>
  </a>

  <!-- script automatically included wherever shortcode is used -->
  <script src="https://unpkg.com/mailgo@0.11.2/dist/mailgo.min.js"></script>
{{ end }}

content/posts/mypost.md

<!-- using mailgo shortcode..
  arg 0 - data-address
  arg 1 - data-domain
  arg 2 (optional) - icon height
-->

{{< mailgo ormsbyadam gmail.com 100 >}}

Adding mailgo in a partial or shortcode avoids using inline HTML in your markdown files. With this method, you are not required to update your site config file as shown in the section above.

Last updated on 12/2/2020 by Matteo Manzinello
← InstallationNext.js →
  • React
    • First way (recommended)
    • Second way
    • React examples
  • Next.js
  • Angular
  • Vue
    • Vue examples
  • Hugo
    • Hugo 0.60.0 and higher
    • Partial templates and shortcodes
mailgo
Docs
InstallationUsage (mailto:)Usage (tel:)ConfigurationExamplesStyle and Accessibilityi18n
Star
Examples
mailgo examplesmailgo Gatsby examplemailgo in create-react-appmailgo Next.js examplemailgo in Vue
More
mailgo Gatsby pluginmailgo WordPress pluginmailgo for Magento 2manzinello/mailgo on PackagistIntegrations by the community
GitHub repositories
mailgomailgo for WordPressmailgo for Magento 2mailgo for Gatsbymailgo Chrome extensionmailgo Firefox addonmailgo examplesmailgo.devmailgo in react-react-appmailgo in Next.jsmailgo in Gatsbymailgo in Vue
Browsers extensions
mailgo Chrome Extensionmailgo Firefox addon
Author
Contact mematteomanzinello.commanzinello.dev
Privacy
Privacy PolicyCookie Policy
mailgo is distributable under the terms of the MIT license, a project by matteo manzinello