Hi Guys,
I am trying to send email from PlayCanvas. I would like to send the score of the game as an email body to my inbox. this score is ideally an object or an array with elements such as name, id, score, etc.
I do not want to implement a database just want to straight get the score emailed to myself. I really need some help on this topic.
Hi @Fire_Picaso,
Sending an email from the browser directly, without using a server, most likely will fail. If you don’t want to setup/use your own server, you can find a service that offers a Rest API for that.
From there you can easily use it with JavaScript to send that email, that isn’t related to the PlayCanvas API. Just vanilla browser JavaScript.
I don’t have a service for that in mind, try doing a search online. I imagine there are several.
Hope that helps.
Thank you so much @Leonidas.
in that case, how data collected on forms are saved?
Maybe better to just have the data saved to a hosted file where we can access it later.
So there are several ways to do that, the most traditional being using a element and specifying a remote server URL (relative or absolute).
That is usually a .php endpoint that will receive the contents of the form, like here:
Thanks again @Leonidas.
If we don’t want to send anything, does playcanvas provide a way to save data locally or hosted?
PlayCanvas at its core is a game/rendering engine, that is a JavaScript library that leverages WebGL and other browser APIs to render 2D and 3D content.
It runs like any other regular HTML/JS browser webpage or application.
To that end it works great with any other JavaScript library, framework or code snipper that can execute in the same environment (browser).
The browser allows you to save data to the local storage, so your PlayCanvas apps and games can use that. Start here: Window.localStorage - Web APIs | MDN
Hi @Leonidas,
Hope you are doing great. I am trying to implement Emailjs to send email from PlayCanvas app.
trying to add installation methods in the head with the following code
document.head.append(this.EmailConfigHTML.resource || '');
where I have the installation codes in the EmailConfigHTML file
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init("uCYEpUQjl6ZL2XNZX");
})();
</script>
its not working…
I got a better version however still not working
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("(function(){emailjs.init(\"uCYEpUQjl6ZL2XNZX\");})();"));
document.head.appendChild(script);
this goes very close but now Im getting errors
Hi @Leonidas
Could you please have a look at my project
I have a form HTML that has the form which gets appended in the
Game.prototype.gameSubmit method in game.js
which also has the sendEmail function that gets called in the form tag
action = sendEmail()
Im adding the from into the dom from game.js script
furthermore, Im the sendEmail function is defined in the game.js file as well
its seems like emailjs is either not being loaded… and also when Im hitting the submit button its coming up with reference error.
Ok, you are close, some corrections:
<div class="container">
<form id="contact-form">
<label for="osis">OSIS Number</label>
<input type="number" id="osis" name="osis" placeholder="Your OSIS number..">
<br/>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email address..">
<br/>
<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" placeholder="Your feedback on the gaming assessment.." style="height:200px"></textarea>
<br/>
<input type="submit" value="Submit">
</form>
</div>
event.preventDefault() call on submit, otherwise the page will reload. //call email.js library
emailjs.init("YOUR EMAILJS ID");
document.getElementById('contact-form').addEventListener('submit', function (event) {
event.preventDefault();
let params = {
osis: document.getElementById("osis").value,
email: document.getElementById("email").value,
feedback: document.getElementById("feedback").value,
score: this.score
};
const serviceID = "serviceID ";
const templateID = "templateID";
emailjs
.send(serviceID, templateID, params)
.then((res) => {
document.getElementById("osis").value = "";
document.getElementById("email").value = "";
document.getElementById("feedback").value = "";
alert("your email sent successfully");
}
)
.catch((err) => consolde.log(err));
});
EDIT: I removed your emailjs IDs from my reply.
You are the best!!! @Leonidas thank you so much for fixing the emailjs
I have one more issue… with the context ‘this’ is not working here
how can I add something from the game object in the templateParams
I would recommend to brush up your javascript skills. There are good tutorials out there.
As for the scope issue - you can simply save it into a variable, and access that variable instead. Something like:
const scope = this;
document.getElementById(...., function (event) {
...
score: scope.score
...
Hi @LeXXik,
thank you so much!!! that worked.
saving the context into a variable is something I noticed but didn’t realize. You are absolutely right!.
Working on my Javascript skills just as learning a new platform.