Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Adding custom images and timers to TinyMCE with NiftyImages

Kevin Linden

October 10th, 2018

Written by

Kevin Linden
Kevin Linden

Category

Tips & How-Tos

The Tiny team is proud to introduce NiftyImages as a Technical Partner Program launch partner. When we thought about the solutions to consider for the launch, NiftyImages immediately came to mind. We’ve been in contact for the past two years and admire how they’re helping deliver personalized email experiences (because hey, we all get a lot of not very personalized email). Here is what Kevin Linden, co-founder of NiftyImagaes, says about the value of the partnership to you.

Most people have a love or hate relationship with email. Our Email Service Provider and CRM clients are very aware of this, and since email is critical to how they communicate with their customers, it’s more important than ever that they send relevant and engaging content. The mission of NiftyImages is to help them deliver this dynamic content in a seamless and effortless way.

Why develop an integration with TinyMCE?

Like most startups, we spend a lot of time listening to our customers. After conducting one of our regular client surveys, and hearing how many of our clients had deployed TinyMCE as their rich text editing solution, it was an easy decision to build a plugin for Tiny so that our clients could more easily integrate NiftyImages into their applications. And with the API access TinyMCE gives to third party developers, it was easy for us to add our tools into their framework, giving our client’s engineering  teams a solution that can be implemented within minutes.

Now anyone using TinyMCE can easily add personalized images and countdown timers directly inside the editor.

NiftyImages widget buttons featuring personalized images
NiftyImages custom images in TinyMCE

How to deploy NiftyImages

As mentioned, adding NiftyImages features to your TinyMCE instance is quite simple. You need our free plugin (which you can download here) and to add a few lines of code to your tinymce init.
If you would rather use a cloud deployment of the NiftyImages plugins than self-hosting them (a good idea if you’re using Tiny Cloud) you can link to the files like this:

<!-- Load Personalized Images Plugin -->
<script type="text/javascript" src="https://widget.niftyimages.com/js/tinymce/tinymce_images.js"></script>
<!-- Load Countdown Timer Plugin -->
<script type="text/javascript" src="https://widget.niftyimages.com/js/tinymce/tinymce_timers.js"></script>

The next step is to include the plugins and configuration, which again is as simple as adding a few lines to the tinymce init. You can use any of the config options found on our documentation page to set the userID, imageName, theme, etc. The only required config parameter is the widgetKey.

// Instantiate the tinymce WYSIWYG and include the niftyimages and niftytimers plugins

// Instantiate the tinymce WYSIWYG and include the niftyimages and niftytimers plugins
tinymce.init({
selector: '#mytextarea',
relative_urls : false,
remove_script_host : false,
convert_urls : true,
plugins: [
'link image ... niftyimages niftytimers'
],
toolbar: 'undo redo | bold italic | ... | niftyimages niftytimers',
menu: {
file: { title: 'File', items: 'newdocument' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },
....
tools: { title: 'Tools', items: 'niftyimages niftytimers | code' }
},
contextmenu: 'link image | niftyimages niftytimers',
niftyimages: {
widgetKey: '00000000-0000-0000-0000-000000000000'     // Required
},
niftytimers: {
widgetKey: '00000000-0000-0000-0000-000000000000'     // Required
}
});

NiftyImages widget buttons countdown timer

Adding social media to NiftyImages

As we build new features in our own platform, we continue to add them to our TinyMCE plugin. We’re especially excited by our new Live Social Feed product, which allows a user to add a collage of Pinterest or Instagram images to any email—and those images will update any time the related hashtag or account is updated.  We’re confident that adding social media into the design process is something that will give our clients an even more dynamic way to engage their customers.

Kevin Linden, Co-founder

About NiftyImages

Founded in 2015, NiftyImages has been dedicated to helping email marketers succeed through innovative email techniques and customized “open time” content. NiftyImages’ clients can use any email service provider to deliver personalized and engaging content in real-time. Over 15,000 companies including Adidas, American Express, Salesforce, Samsung, Toyota, STARZ, RyanAir, and Hilton Grand Vacations use NiftyImages to drive higher CTR and ROI. NiftyImages is located in Mather, California.

PartnerTinyMCE
Kevin Linden
byKevin Linden

Kevin co-founded the email service provider EmailDirect.com, which grew to over 500 monthly clients and 1 billion emails sent every month. After a successful exit in 2015, he co-founded NiftyImages, which now has over 10,000 users and direct integrations into multiple ESP platforms.

Related Articles

  • Visual depiction of Tiny and Angular integration
    Tips & How-Tos

    How to add TinyMCE 5 to a simple Angular project

    by Simon Fjeldså in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor