14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

Adding custom images and timers to TinyMCE with NiftyImages

October 10th, 2018

3 min read

Tiny Partner Program blog header for Nifty Images

Written by

Kevin Linden


How-to Use TinyMCE

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
    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.

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

  • How-to Use TinyMCEMay 15th, 2024

    How to set up Vue fonts in your WYSIWYG

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge


© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.