I am looking to use the source code of an email which has the desired template that i need in the Microsoft Graph API.
The standard format for this looks like so:
"message": {
"subject": "Meet for lunch?",
"body": {
"contentType": "HTML",
"content": "The new cafeteria is open."
},
The sourcecodes template that i am looking to use already has contentType etc within the code.I have tried removing contentType and content and just having the source code within the body but this still does not work. Below is start of the source code that i am looking to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="http://www.opusenergy.com/wp-content/uploads/2016/03/Favicon-150x150.png" />
<title>Opus</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
Any help will be greatly appreciated, Thank you.
The above payload is not what Graph API looks for. You need to specify the payload for the create message API call and the structure is given in the Graph API document. Still if you want to customize, you can do it, by making sure to modify/customize in-lines with Microsoft Graph API recommendation. Say i will put the HTML content inside the content of the Graph API call, specify the contenttype as HTML. This is the way i would start testing it make sure whether it's working or still i need to modify so that the message can show correctly in Outlook or not.
You tried the above recommendation and confirmed that it works.
If i want to send out email/template then i would first make sure it works in Word/Outlook; so that you can validate the HTML/CSS tags are working in, as i know that not all tags are not supported. Please keep this best practice and plan it accordingly. It will help you to build the template as you wish and you're guaranteed that the Outlook will show-up them as well.
Related
is there any way for me to change the tags meta according to the page I'm accessing an example below
Home
/
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://website.com.br/">
<meta property="twitter:title" content="Website - Home">
<meta property="twitter:description" content="Website online">
<meta property="twitter:image" content="https://website.com.br/logo.jpg">
/product/123
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://website.com.br/product/123">
<meta property="twitter:title" content="Website - Product 123">
<meta property="twitter:description" content="Description product">
<meta property="twitter:image" content="https://website.com.br/product/123/thumbnail.jpg">
I used the vue-meta but didn't get the expected result to work the browser needs before accessing and waiting for JavaScript to do its job, but some social bots just consumes the HTML not running JavaScript that would make the change.
Is there any way I can fix the meta for each page?
I am trying to use peerjs in vue app. So I added the cdn script in vue index.html file's header like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1.0">
<title>peer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Now in a components' mounted hook, I am doing this to just console the id
var peer1 = new Peer();
peer1.on('open', function(id) {
console.log('My peer1 ID is: ' + id);
});
Nothing happens.
I then created a simple html file and run that html file I was able to see the id.
Next I tired to see XHR tab, I see when running a plain html file, two ajax calls is sent and in the result an ID is returned. But in vue, there is nothing like this. All I get a socket that returns this values
{websocket: true, origins: ["*:*"], cookie_needed: false, entropy: 1058218289}
cookie_needed
:
false
entropy
:
1058218289
origins
:
[":"]
websocket
:
true
One more thing, peers js documentations says to use api key, but if I use api key nothing happens in vue or html. Without the key, in html file I get the id.
Anyone knows please help me. Thank you.
We are using branch to generate dynamic links for our application. We are using these links on various social media platforms. Branch configuration options enables us to populate fixed set of open graph data. In case of videos it lets us set og:video but there is no way to set og:video:type. Due to this, video embedding doesn't work if you are using HTML5 videos as the default video-type for Facebook is application/x-shockwave-flash.
I tried passing extra data while configuring link but it doesn't translate to HTML meta tags that are scrapped by Facebook.
When a Branch link is scraped, Branch will return:
1st: any parameters that have been defined for the link;
2nd: any parameters that have not been defined for the link but that have been defined at the app level (in Social Media Display Customization on the Link Settings page);
and finally: any meta tags present on the web site specified in the Default URL ($fallback_url) page.
Thus, even though the Branch does not provide an explicit parameter for defining og:video:type, you should be able accomplish this by adding the meta tag to the web page you use as your $fallback_url.
Here is an example:
I start with the following link "https://ogt1.app.link/fallbackurltags" where I have set the parameters below (note that "" is shown because I did not set any OG parameters for the link). Note that I have set the $fallback_url:
{
"$desktop_deepview": "",
"$desktop_url": "",
"$fallback_url": "https://dwestgate.github.io/ExampleFallBackURL/",
"$marketing_title": "OG Tag Testing - fallback URL tags",
"$og_description": "",
"$og_image_url": "",
"$og_title": "",
"$one_time_use": "",
"~creation_source": 1,
"~feature": "marketing",
"~id": "357178398369800081",
"~marketing": true
}
"og:video:type=application/x-shockwave-flash" has not been seet anywhere on the Branch dashboard or as a link parameter.
I have added meta tags, however, to a simple web site I have created and assigned as the $fallback_url: https://dwestgate.github.io/ExampleFallBackURL/. Here is that web page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="title" content="Tag set by Fallback URL" />
<meta name="description" content="Tag set by Fallback URL" />
<meta property="og:title" content="Tag set by Fallback URL" />
<meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="160" />
<meta property="og:video:height" content="90" />
<title>Fallback URL with meta tags</title>
</head>
<body>
<h1>All the action is in the meta tags - View Source</h1>
</body>
</html>
When I now browse to Facebook's Sharing Debugger (here: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Ffallbackurltags) - voila: the og:video:type tag from that web page has been scraped. You can see the raw tags returned by clicking on the "Show All Raw Tags" button.
One thing that I did not mention that may screw things up: if there is a value provided for $og_url, only the tags for the website provided in this value will be present. The link https://ogt1.app.link/linktags, for example, has the following parameters:
{
"$marketing_title": "OG Tag Testing - per-link tags",
"$og_description": "OG Tags set at the link level",
"$og_image_height": "200",
"$og_image_url": "https://cdn.branch.io/branch-assets/1486394827408-og_image.png",
"$og_image_width": "200",
"$og_title": "Per-Link tags",
"$og_url": "https://dwestgate.github.io/ExampleFallBackURL/",
"$og_video": "https://www.youtube.com/v/CsGYh8AacgY",
"$og_video_height": "180",
"$og_video_width": "320",
"$one_time_use": "",
"~creation_source": 1,
"~feature": "marketing",
"~id": "357170874539266599",
"~marketing": true
}
In this situation the link parameters get overridden by the parameters in $og_url, as can be seen by checking the Facebook Sharing Debugger again (here: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fogt1.app.link%2Flinktags):
<meta charset="utf-8" />
<meta name="title" content="Tag set by Fallback URL" />
<meta name="description" content="Tag set by Fallback URL" />
<meta property="og:title" content="Tag set by Fallback URL" />
<meta property="og:video:url" content="http://www.youtube.com/v/CsGYh8AacgY?version=3&autohide=1" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="160" />
<meta property="og:video:height" content="90" />
I hope this provides sufficient clarity to allow you to populate whatever custom OG tags are needed.
There is an option to add custom meta tags according to branch documentation. Just put every meta tag inside it which aren't supported by default.
$custom_meta_tags: '{"og:video:type": "application/x-shockwave-flash"}'
How do I get the full URL string when using the relative path nomenclature via tilde? For example, if I want to refer to something in my view using relative path...
~/images/mylogo.jpg
I would like to get the full url such that it would end up looking like ...
https://myserver:8081/images/mylogo.jpg
This is needed to populate the metatags for Open Graph. I am trying to use ...
<meta property="og:image" content="#Url.Content("~/images/mylogo.jpg")" />
... but this only gives relative paths resulting in ...
<meta content="/images/mylogo.jpg" property="og:image">
Details - need to detect if SSL is used or not. Need to determine current port and host name...
The possible duplicate answer at Getting absolute URLs using ASP.NET Core MVC 6 was very similar, but did not address the use of the tilde. For the tilde I used the URL Helper 'Content' method. For completeness here is where I landed...
Create extension method...
using Microsoft.AspNetCore.Mvc;
namespace testProject.Utilities
{
public static class MVCExtensionMethods
{
public static string BaseUrl(this IUrlHelper helper)
{
var url = string.Format("{0}://{1}", helper.ActionContext.HttpContext.Request.Scheme, helper.ActionContext.HttpContext.Request.Host.ToUriComponent());
return url;
}
public static string FullURL(this IUrlHelper helper, string virtualPath)
{
var url = string.Format("{0}://{1}{2}", helper.ActionContext.HttpContext.Request.Scheme, helper.ActionContext.HttpContext.Request.Host.ToUriComponent(), helper.Content(virtualPath));
return url;
}
}
}
Use in View via Razor...
#using testProject.Utilities
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:url" content="#Url.BaseUrl()" />
<meta property="og:type" content="website" />
<meta property="og:title" content="#ApplicationConstants.ApplicationTitle" />
<meta property="og:description" content="#ApplicationConstants.TagLine" />
<meta property="og:image" content="#Url.FullURL("~/images/logo-black.png")" />
<title>#ApplicationConstants.ApplicationTitle</title>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
#Html.ApplicationInsightsJavaScript(TelemetryConfiguration)
</head>
<body>
</body>
</html>
Summary...
MVC has two kinds of helpers - HTML Helpers and URL helpers. I was trying to get the URL when using the HTML helpers. Should have been using the URL helper instead. The possible dup answer directed me to look into the URL helper instead. It did not show the use of the tilde virtual directory nomenclature though...
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.