How to integrate "Angular MJML Drag & Drop Email Template Builder" in my existing Angular Project?


#1

I have purchased “Angular MJML Drag & Drop Email Template Builder”. Now I want to integrate it in my existing project. I saw “Angular MJML Drag & Drop Email Template Builder” Documentation but I can’t find any step to integrate “Angular MJML Drag & Drop Email Template Builder” in existing angular project.

So, Please provide step by step guidance for how to integrate “Angular MJML Drag & Drop Email Template Builder” in my existing Angular Project.

Thanks.


Installation of Angular EMail Builder
#2

Hi Wodev,
Correct, there isn’t any step by step documentation to integrate in your existing project, because all projects are different and I can’t guess how to do it!
This project is created like another Angular module, if you know how Angular works then you know how to integrate it in another Angular or non Angular project :slight_smile:

Let me know your programing skills and your server requirements!


#3

Hi,

Yes i can understand that you cannot guess the integration process for every project…but i think it would have been better if there was at least some basic info regarding integration in basic angular project.

Anyways, i have managed to integrate it into my project but now i am having trouble with the saving of the email. i do not use node server so can you please suggest a way to get the saving of the email to work?


#4

For that, you’ll need to make changes in /builder/builder.js

I made a special factory, called ‘storage’, look from line 1031 to 1082.

I specially made get, put and delete functions to be more simply! Just change these functions and return promises, like $.get() or $.post(), you know!

On GET request you can return Email which contain ID, and on POST this ID will be in email parameter.

Look here:
http://www.wlocalhost.org/t/how-to-save-your-email-on-database/23/1


#5

For MJML API credentials, you need to request them from here: https://mjml.io/api


#6

Ok… Thanks. I got MJML API credentials. I entered mjmlPublicKey in config, but what about mjmlApplicationId .??


#7

Didn’t receive it with all details from MJML team?


#8

Hi…

I have created account on https://mjml.io/api when I am click on “Join the beta” then I am redirect on https://mjml.typeform.com/to/tW2U6K here I have fill the form and registered then I have redirect on https://admin.typeform.com

Here I have got API key from typeform MyAccount Page(https://admin.typeform.com/account#/section/user). use this API key as mjmlPublicKey?

Now. I want to MJML Application ID. So, where I can find it?

Didn’t receive it with all details from MJML team?

You mean MJML send this detail on my registered email ID? But I didn’t received any email form MJML team.

So, Can you please help me out from this?


#9

Hi, you need to wait some days to receive an email from MJML team with all these details!
You don’t need anything from typeform, there’s only request form!


#10

How long does a response normally take for the credentials?


#11

It takes 2-3 days, but did you fill their form?
I’ll embed that form here, just type on Join and complete all fields!


#12

Hello, I have purchased your product today, I am relatively new to Angular, I have an existing Angular Project and I need some basic guidance.
I usually install packages using bower from web sources.
Should I copy manually the files from your bower_components to mine?

I added to my app.js your dependency

angular.module(‘myAppName’, [
‘ngRoute’,
‘ngResource’,
‘ngStorage’,
‘email.builder’,


What do I need to add more to the index.html file ?
What next?


#13

Hi, Thanks for your purchasing!
So what is the problem?

First of all you have to add add builder/builder.js file in your project, after that change line 1098 from builder.js with your route :wink:

Let me know if you have other questions!


#14

Questions
1 .Which files should I copy to my angular JS project and where it is recommended to copy them?
I want to avoid using 2 versions of angular, I already have some of the packages from your bower_components dir

  1. How do I have the nodejs server localy for mjml?

Is there a way that we chat so I can solve my problems easy?


#15

Hi, I think I did all of what was requested to integrate the builder in my angular web app, but it’s not working yet.

I’ve added via bower all the dependencies
I’ve imported these files in my index.html and in my root app folder

 <script src="config.js"></script>
 <script src="builder/builder.js"></script>

I’ve changed the routing inside the builder.js at line 1098, as you suggested but the module still doesn’t work

this is the actual result…what am I doing wrong?


#16

Hi Anca,

  1. Look in app/index.html, there’re all needed files which you want to include in your project, copy them wherever you want!
  2. There’s a gulpfile.js with ‘common_scripts’ task where you can add/remove plugins which you don’t want to include.

#17

Did you include common.min.js and app.min.css files?
Look in app/index.html, there’re all needed files which you have to have in your project!


#18

Hi thank you for the fast response!

If I import the common.min.js

this is what happens

I have angular-sanitize (ngSanitize) included for my web app. But even If I remove the import of angular-sanitize the error still persists

PS. Ignore the EOF error


#19

It seems that you have included sanitize twice, you can edit gulpfile.js

or remove sanitize from where you have included!


#20

Hi thank you again for your support

I managed to make it work with your advice. Now I can see the builder, I can add, remove, duplicate elements. But as you can see from the screenshot,the email doesn’t respond to the change of the height of the document. The last image element goes out of the email bounds.

There’s another problem with the element on 3 columns

I checked for something css related, but I found nothing of relevant. The element is built inside a flex div and as you can see from the screenshot below, images and texts inside are correctly behaving as they should inside a flex box.

This is, instead, how is built the same element in the live preview of themeforest (where I bought this builder)…


as you can see from the inspector, the element is built in the correct way, with another flex div (that contains a text and an image) inside the flex container. I think there’s bug in this plugin version

The same thing happens with the element “image + text on the right/left”. It’s like some html elements get stripped out when I drop the element in the email