Do you have your own LaTeX site? Would you like to add "Open in Overleaf" functionality to help it stand out? If so, you're at the right place!
Looking to quickly add a link from your blog? Easy options on our partners page!
We've developed the tools you need to load LaTeX code and files from your website or blog directly into Overleaf.
See it in action: we recently worked with LaTeX-Community.org to allow all of their 66k examples to be loaded into Overleaf with one click (read more).
To add similar functionality to your site, take a look at the sections below. If you have questions, please contact support, and we'll be happy to help.
Last Modified: 21st January 2013
You can load a code snippet into Overleaf by POST
ing it (or its URI) to https://www.overleaf.com/docs
using a form.
The most basic approach is to use a link:
https://www.overleaf.com/docs?snip_uri=http://pathtoyourfile.tex&splash=none
The &splash=none
parameter is optional, it turns off our tutorial splash screen so that users go straight to the loaded example. This is a link in action.
Four other implementation options are given as examples (click the Implementations tab above to view), and there are a number of customizable features to help tailor the "Open in Overleaf" function to your site; these can be found in the Features tab.
Please contact support with any questions.
Last Modified: 21st January 2013
You can post the URI of a file, and Overleaf will download the file and import
it as the main file of the project. Here we pass the full path to this file for the snip_uri
parameter.
The file must be accessible from our servers. The file will be fetched using
either HTTP or HTTPS, depending on the URI that you give it; other protocols are
not yet supported.
This is implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<input type="text" name="snip_uri" value="https://dl.dropbox.com/u/31383671/site/helloworld.tex" />
<input type="submit" class="wl-submit" value="Open in Overleaf" /> <br />
<input type="checkbox" name="splash" value="none" />For testing: Never show help splash.
</form>
Or alternatively you can just use a link as described on the Overview tab. We recommend that you use encodeURIComponent
, or an equivalent method on the server side, to escape each parameter, but this is not absolutely necessary.
You can also upload multiple files using array parameters like this:
https://www.overleaf.com/docs?snip_uri[]=http://.../a.tex&snip_uri[]=http://.../b.tex
and there's a snip_name
parameter that you can use to override the name of each uploaded file, like this:
https://www.overleaf.com/docs?snip_uri[]=http://.../a.php&
snip_uri[]=http://.../b.php&snip_name[]=a.tex&snip_name[]=b.tex
URL encoding is useful if you submit using a hidden input
field, as in this example. This avoids problems with newlines in the TeX source. This example posts the result of (PHP5) urlencode("\\documentclass{article}\n\\begin{document}\nHello \$i\$ \& \$j\$.\n\\end{document}\n");
in the encoded_snip
parameter. If using javascript, the encodeURIComponent
function should be used (not the escape
function, which has problems with internationalisation).
If you submit from a server side or with AJAX, you can use the snip
parameter, which assumes no encoding. Another use case is submission from a
textarea
(which could be hidden using CSS); in this case you must
escape HTML entities in the HTML source.
This is implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<textarea name="snip" rows="10" cols="60">\documentclass[12pt,letterpaper]{article}
\usepackage[T1]{fontenc}
\usepackage{amsmath}
\begin{document}
\noindent
Bla bla bla bla :
\begin{align*}
A &= B + C - D \\ \\
%phantom
&\phantom{= B + C \;}
%phantom
+ D - E \\ \\
&= F + G - H.
\end{align*}
\end{document}</textarea>
<input type="checkbox" name="splash" value="none" />For testing: Never show help splash.
<input type="submit" class="wl-submit" value="Open in Overleaf" />
</form>
This example shows how to extract the unformatted code from a CSS-styled code box and submit it to Overleaf. The key components are:
openInOverleaf()
function.form
with id wl_form
, which is used to POST
the source as a URL-encoded snippet. Note that in this case you only need one
form on the page, even if you have multiple codeboxes.openInOverleaf()
.\renewcommand{\arraystretch}{2}
\[
g :=\left(
\begin{array}{c|c}
\mathbf{2^D} & \textbf{1} \\ \hline
\textbf{1} & \begin{array}{cc}
\boldsymbol{1^\alpha} & \textbf{0} \\
\textbf{0} & \boldsymbol{1^\beta}
\end{array} \\
\end{array}
\right)
\]
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows}
\begin{document}
\begin{tikzpicture}[->,>=stealth',shorten >=1pt,auto,node distance=3cm,
thick,main node/.style={circle,fill=blue!20,draw,font=\sffamily\Large\bfseries}]
\node[main node] (1) {1};
\node[main node] (2) [below left of=1] {2};
\node[main node] (3) [below right of=2] {3};
\node[main node] (4) [below right of=1] {4};
\path[every node/.style={font=\sffamily\small}]
(1) edge node [left] {0.6} (4)
edge [bend right] node[left] {0.3} (2)
edge [loop above] node {0.1} (1)
(2) edge node [right] {0.4} (1)
edge node {0.3} (4)
edge [loop left] node {0.4} (2)
edge [bend right] node[left] {0.1} (3)
(3) edge node [right] {0.8} (2)
edge [bend right] node[right] {0.2} (4)
(4) edge node [left] {0.2} (3)
edge [loop right] node {0.6} (4)
edge [bend right] node[right] {0.2} (1);
\end{tikzpicture}
\end{document}
Last Modified: 29 July 2014
The features below are included to aid usability of the "Open in Overleaf" implementations, and may be customized to suit your preferences.
The code must be wrapped with a valid document in order to compile. If the code
snippet does not have a \documentclass
tag, it is wrapped in a
standard document when it is imported:
\documentclass[12pt]{article}
\usepackage[english]{babel}
\usepackage[utf8x]{inputenc}
\usepackage{amsmath}
\usepackage{tikz}
\begin{document}
SNIPPET GOES HERE
\end{document}
The submitted snippet should be encoded using UTF-8; the server converts it to UTF-8, otherwise. Windows newlines are converted to unix newlines.
By default, the first time a user creates or loads a project on Overleaf, we show a tutorial help screen. A cookie ensures that the user only sees this message once on that computer. If the user is signed in to Overleaf, they will not see it a second time on any machine. (But it is always available in the help menu.)
If you do not wish for the user to ever see the help screen when they create a
project from a snippet on your site, pass a splash
parameter with
value none
.
In the examples on this page, we use a checkbox for the splash
parameter, but you would ordinarily use a hidden field, as in:
<input type="hidden" name="splash" value="none" />
By default, Overleaf tries to detect which TeX engine to use, and it usually chooses pdflatex
. If you would like to set the engine explicitly for your new project, you can pass an engine
parameter with one of the following values:
latex_dvipdf
, pdflatex
, xelatex
or lualatex
.
You can require that the new project be a protected project by passing a protected
parameter with value required
. If the user is not signed in, or their account cannot create protected projects, then they will be prompted to sign in or upgrade as appropriate.
There are two editing modes in Overleaf: Source mode and Rich Text mode. By default, new project are displayed in Source mode.
You can mark a project to default to Rich Text mode by passing a rich_text
parameter with value true
.
Note that the user can always switch between editing modes with one click, and their preference for each project is stored with a cookie and has higher precedence over the default setting.
We add a short 'welcome' comment at the top of the snippet:
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Welcome to Overleaf --- just edit your LaTeX on the left,
% and we'll compile it for you on the right. If you give
% someone the link to this page, they can edit at the same
% time. See the help menu above for more info. Enjoy!
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%