marcuskammer/emacs.d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
emacs.d/clones/libera.chat/guides/webchat.html

969 lines
27 KiB
HTML
Raw Normal View History

Update clones
2022-10-07 15:47:14 +02:00
<!DOCTYPE html>
<html lang="en"><head>
<link rel="preload" href="../static/fonts/comfortaa-v30-subset-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="../static/fonts/ubuntu-v15-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="../static/fonts/ubuntu-v15-subset-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="../static/img/libera-color.svg" as="image" type="image/svg+xml">
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Using Our Webchat | Libera Chat</title>
<meta name="generator" content="Jekyll v3.9.2" />
<meta property="og:title" content="Using Our Webchat" />
<meta property="og:locale" content="en_GB" />
<meta name="description" content="What is a webchat?" />
<meta property="og:description" content="What is a webchat?" />
<link rel="canonical" href="webchat.html" />
<meta property="og:url" content="https://libera.chat/guides/webchat" />
<meta property="og:site_name" content="Libera Chat" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-10-03T18:36:48+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Using Our Webchat" />
<meta name="twitter:site" content="@liberachat" />
<meta property="article:publisher" content="liberachat" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"TechArticle","dateModified":"2022-10-03T18:36:48+00:00","datePublished":"2022-10-03T18:36:48+00:00","description":"What is a webchat?","headline":"Using Our Webchat","url":"https://libera.chat/guides/webchat"}</script>
<!-- End Jekyll SEO tag -->
<link rel="icon" type="image/svg+xml" href="../static/img/libera-color.svg">
<link rel="alternate icon" href="../favicon.ico">
<!-- Stylesheets -->
<style>/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}</style>
<style>@font-face {
/* comfortaa-regular - subset */
font-family: 'Comfortaa';
src: url('../static/fonts/comfortaa-v30-subset-regular.woff2') format('woff2'), url('../static/fonts/comfortaa-v30-subset-regular.woff') format('woff'), url('../static/fonts/comfortaa-v30-subset-regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
/* . C L a b e h i r t */
unicode-range: U+002E, U+0043, U+004C, U+0061-0062, U+0065, U+0068-0069, U+0072, U+0074;
}
@font-face {
/* ubuntu-regular - latin */
font-family: 'Ubuntu';
src: local(''), url('../static/fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), url('../static/fonts/ubuntu-v15-latin-regular.woff') format('woff'), url('../static/fonts/ubuntu-v15-latin-regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
/* ubuntu-500 - subset */
font-family: 'Ubuntu';
src: local(''), url('../static/fonts/ubuntu-v15-subset-500.woff2') format('woff2'), url('../static/fonts/ubuntu-v15-subset-500.woff') format('woff'), url('../static/fonts/ubuntu-v15-subset-500.ttf') format('truetype');
font-style: normal;
font-weight: 500;
font-display: swap;
/* C c e n o t */
unicode-range: U+0043 U+0063 U+0065 U+006E U+006F U+0074;
}
:root {
--header-height: 4rem;
--content-inline-padding: 1.3rem;
--content-max-width: 80ch;
/* define our palette for all themes */
--white: #fff;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-800: #1f2937;
--gray-900: #111827;
--brand-purple: #5555ff;
--brand-pink: #ff55dd;
/* light-theme vars */
--c-bg: var(--gray-100);
--c-bg-secondary: var(--white);
--c-text: var(--gray-800);
--c-border: var(--gray-300);
--c-hl: var(--brand-pink);
--c-hl-secondary: var(--brand-purple);
--c-text-on-hl: var(--gray-800);
--c-text-on-hl-secondary: var(--white);
}
@media (prefers-color-scheme: dark) {
:root {
--c-bg: var(--gray-800);
--c-bg-secondary: var(--gray-900);
--c-text: var(--gray-200);
--c-border: var(--gray-400);
}
}
* {
color: var(--c-text);
box-sizing: border-box;
font-family: Ubuntu, sans-serif;
letter-spacing: .1ch;
}
main *, .hero * {
line-height: 1.5;
}
body {
background-color: var(--c-bg);
min-height: 100vh;
display: grid;
grid-template-rows: var(--header-height) min-content auto auto min-content;
grid-template-columns: 1fr;
grid-template-areas: "header" "hero" "main" "aside" "footer";
}
a {
text-decoration: underline;
text-underline-offset: .05rem;
}
a:hover {
text-underline-offset: .25rem;
color: var(--c-hl);
}
h1, h2, h3, h4, h5, h6, p {
word-break: break-word;
scroll-margin-block-start: 4.5rem;
}
h1, h2, h3, h4, h5, h6, strong {
font-weight: 500;
}
em {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
margin-block-end: 0;
}
h1+*, h2+*, h3+*, h4+*, h5+*, h6+* {
margin-block-start: 0;
}
main h1 {
font-size: 2.25rem;
}
main h2 {
font-size: 1.5rem;
}
main h3 {
font-size: 1.25rem;
}
main :is(h2, h3, h4, h5, h6) a {
text-decoration: none;
position: relative;
}
main :is(h2, h3, h4, h5, h6) a:hover::before {
content: '#';
position: absolute;
left: -1.5ch;
bottom: 0;
font-weight: normal;
font-size: 1rem;
}
@media screen and (min-width: 800px) {
body {
grid-template-columns: min-content 8fr;
grid-template-rows: 4rem min-content auto min-content;
grid-template-areas: "header header" "hero hero" "aside main" "footer footer";
}
}
.skiplink {
z-index: 9999;
transform: translateY(calc(-100% - 1rem));
display: block;
position: absolute;
height: 4rem;
padding: var(--content-inline-padding);
background-color: var(--c-bg);
border-inline-end: 1px solid var(--c-border);
border-block-end: 1px solid var(--c-border);
}
.skiplink:focus {
z-index: 9999;
transform: translateY(0);
}
header {
grid-area: header;
height: var(--header-height);
border-block-end: 1px solid var(--c-border);
background-color: var(--c-bg-secondary);
position: sticky;
top: 0;
z-index: 1000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
header a {
text-decoration: none;
}
header .logo {
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 100%;
padding-inline-start: var(--content-inline-padding);
}
header .logo img {
padding-block-end: .3rem;
}
header .logo h1 {
margin: 0;
margin-bottom: -.4rem;
font-size: 1.7rem;
line-height: 1;
font-family: Comfortaa, Ubuntu, sans-serif;
font-weight: bold;
}
header .nav-toggle {
display: block;
border-inline-start: 1px solid var(--c-border);
padding: 0 1rem;
display: flex;
align-items: center;
cursor: pointer;
}
header nav details summary, header nav a {
border-block-end: 1px solid var(--c-border);
padding: 1rem;
display: flex;
align-items: center;
cursor: pointer;
white-space: nowrap;
}
header nav details summary::before {
content: "►";
padding-inline-end: .3rem;
}
header nav details[open] summary::before {
content: "▼";
}
header nav .nav-close {
display: none;
}
header nav.show .nav-close {
display: flex;
}
header nav {
transform: translateY(calc(-100% - 1rem));
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: var(--c-bg-secondary);
min-width: 20rem;
max-width: 30rem;
border-inline-start: 1px solid var(--c-border);
z-index: 10000;
}
header nav.show, header nav:focus-within {
transform: translateY(0);
}
header nav details summary.highlight, header nav a.highlight {
background-color: var(--c-hl);
color: var(--c-text-on-hl);
font-weight: 500;
}
header nav details summary:hover, header nav a:hover {
background-color: var(--c-bg);
}
header nav details summary.highlight:hover, header nav a.highlight:hover {
background-color: var(--c-hl-secondary);
color: var(--c-text-on-hl-secondary);
}
header nav details {
display: flex;
flex-direction: column;
position: relative;
}
header nav details a {
padding-inline-start: 2.5rem;
}
@media screen and (min-width: 950px) {
header .nav-toggle, header .nav-close, header nav.show .nav-close {
display: none;
}
header nav {
transform: initial;
display: flex;
flex-direction: row;
justify-content: flex-end;
position: initial;
background-color: initial;
min-width: unset;
max-width: unset;
border-inline-start: none;
}
header nav.show, header nav:focus-within {
transform: initial;
}
header nav details summary, header nav a {
border-block-end: none;
border-inline-start: 1px solid var(--c-border);
border-inline-end: 1px solid var(--c-border);
padding: 0 1rem;
display: flex;
margin-inline-start: -1px;
align-items: center;
height: 100%;
}
header nav details:last-of-type summary {
border-inline-end: none;
}
header nav details[open] summary {
border-block-end: 1px solid var(--c-border);
height: calc(100% + 1px);
}
header nav details div {
position: absolute;
right: 0;
}
header nav details div a {
background-color: var(--c-bg-secondary);
border-block-end: 1px solid var(--c-border);
padding: 1rem;
}
}
main {
grid-area: main;
padding: 0 var(--content-inline-padding);
max-width: var(--content-max-width);
min-width: 0;
width: 100%;
margin: 2rem auto;
}
nav.article-nav {
display: flex;
flex-direction: row;
justify-content: center;
}
nav.article-nav div {
width: 33%;
text-align: center;
}
footer {
grid-area: footer;
align-self: end;
background-color: var(--c-bg-secondary);
border-block-start: 1px solid var(--c-border);
padding: .5rem var(--content-inline-padding);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
footer div {
line-height: 2;
}
footer div .mobile-hide {
display: none;
}
footer div a {
white-space: nowrap;
}
footer div a:not([rel*=license]), footer div .copyright {
display: block;
}
@media screen and (min-width: 800px) {
footer div {
line-height: 1.5;
}
footer div:last-of-type {
padding-inline-start: 1rem;
}
footer div .mobile-hide {
display: inline;
}
footer div a:not([rel*=license]), footer div .copyright {
display: initial;
}
}
</style>
<style>aside {
grid-area: aside;
background-color: var(--c-bg-secondary);
/* padding: var(--content-inline-padding); */
border-block-start: 1px solid var(--c-border);
width: 100%;
height: min-content;
align-self: end;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 30ch;
overflow-y: auto;
}
aside .title {
margin-block-end: 0;
margin-inline: var(--content-inline-padding);
margin-block-start: 1rem;
margin-block-end: .5rem;
font-size: 2rem;
font-weight: 500;
}
aside details:not(:last-child) {
border-block-end: 1px solid var(--c-border);
}
aside details summary, aside a {
padding: 1rem;
display: flex;
align-items: center;
cursor: pointer;
white-space: nowrap;
}
aside a {
text-decoration: none;
}
aside details summary::before {
content: "►";
padding-inline-end: .3rem;
}
aside details[open] summary::before {
content: "▼";
}
aside details summary:hover, aside a:hover, aside a.active {
background-color: var(--c-bg);
}
aside details {
display: flex;
flex-direction: column;
position: relative;
}
aside details a {
padding-inline-start: 2.5rem;
}
@media screen and (min-width: 800px) {
aside {
border-block-start: none;
border-inline-end: 1px solid var(--c-border);
width: max-content;
height: 100%;
}
}
</style>
<link rel="stylesheet" href="../static/css/additional-styles.css">
<script src="../static/js/header-links.js" defer></script>
</head>
<body><a class="skiplink" href="webchat.html#main">Skip to content</a>
<header>
<a class="logo" href="../index.html" aria-label="Libera Chat, back to start page">
<img alt="" src="../static/img/libera-color.svg" height="48px" data-proofer-ignore>
<h1>Libera.&ZeroWidthSpace;Chat</h1>
</a>
<a id="nav-toggle" class="nav-toggle hidden" aria-controls="main-nav"><span>Navigation</span></a>
<nav class="" id="main-nav" aria-labelledby="nav-toggle" role="menubar">
<a id="nav-close" class="nav-close hidden" aria-controls="main-nav"><span>Close</span></a>
<details>
<summary
>About</summary>
<div>
<a
role="menuitem"
href="../policies.html"
><span>Network Policies</span></a>
<a
role="menuitem"
href="../guidelines.html"
><span>Channel Guidelines</span></a>
<a
role="menuitem"
href="../news.html"
><span>Blog & News</span></a>
<a
role="menuitem"
href="../about.html"
><span>About Libera Chat</span></a>
<a
role="menuitem"
href="../bylaws.html"
><span>Bylaws</span></a>
<a
role="menuitem"
href="../minutes.html"
><span>Meeting Minutes</span></a>
<a
role="menuitem"
href="../annual-reports.html"
><span>Annual Reports</span></a>
<a
role="menuitem"
href="../sponsors.html"
><span>Sponsors</span></a>
</div>
</details>
<details>
<summary
>Contribute</summary>
<div>
<a
role="menuitem"
href="../contributing/donate.html"
><span>Donate</span></a>
<a
role="menuitem"
href="../contributing/sponsor.html"
><span>Sponsor Us</span></a>
<a
role="menuitem"
href="../contributing/development.html"
><span>Development</span></a>
</div>
</details>
<a role="menuitem" href="../chanreg.html"><span>Channel Namespaces</span></a>
<a role="menuitem" href="../guides.html"><span>Guides</span></a>
<a role="menuitem" href="faq.html"><span>FAQ</span></a>
<details>
<summary
class="highlight"
>Connect</summary>
<div>
<a
role="menuitem"
href="https://web.libera.chat"
rel="noopener noreferrer"
><span>Webchat</span></a>
<a
role="menuitem"
href="ircs://irc.libera.chat:6697"
><span>irc.libera.chat:6697 (TLS)</span></a>
<a
role="menuitem"
href="connect.html"
><span>How to Connect</span></a>
</div>
</details>
</nav>
</header>
<script async>
const navToggle = document.querySelector('#nav-toggle')
const navClose = document.querySelector('#nav-close')
const mainNav = document.querySelector('#main-nav')
// progressive enhancement!
navToggle.classList.remove('hidden')
navClose.classList.remove('hidden')
navToggle.addEventListener('click', event => {
event.preventDefault()
mainNav.classList.toggle('show')
})
navClose.addEventListener('click', event => {
event.preventDefault()
mainNav.classList.remove('show')
})
</script>
<aside role="menu">
<span class="title">Guides</span>
<details open>
<summary>About IRC</summary>
<div>
<a
role="menuitem"
href="basics.html"
><span>Basics of IRC</span></a>
<a
role="menuitem"
href="faq.html"
><span>Frequently Asked Questions</span></a>
<a
role="menuitem"
href="clients.html"
><span>Choosing an IRC client</span></a>
</div>
</details>
<details open>
<summary>Helping you connect</summary>
<div>
<a
role="menuitem"
href="connect.html"
><span>Connecting to Libera.Chat</span></a>
<a
role="menuitem"
class="active"
href="webchat.html"
><span>Using Our Webchat</span></a>
<a
role="menuitem"
href="sasl.html"
><span>Using SASL</span></a>
<a
role="menuitem"
href="https://libera.chat/guides/certfp"
><span>Using CertFP</span></a>
</div>
</details>
<details open>
<summary>Using the network</summary>
<div>
<a
role="menuitem"
href="registration.html"
><span>Nickname Registration</span></a>
<a
role="menuitem"
href="sendpass.html"
><span>Resetting your Password</span></a>
<a
role="menuitem"
href="cloaks.html"
><span>Cloaks</span></a>
<a
role="menuitem"
href="findingchannels.html"
><span>Finding Channels</span></a>
<a
role="menuitem"
href="channels.html"
><span>Using Channels</span></a>
<a
role="menuitem"
href="usermodes.html"
><span>User Modes</span></a>
</div>
</details>
<details open>
<summary>Running a channel</summary>
<div>
<a
role="menuitem"
href="creatingchannels.html"
><span>Creating Channels</span></a>
<a
role="menuitem"
href="channelmodes.html"
><span>Channel Modes</span></a>
<a
role="menuitem"
href="bots.html"
><span>Network bots</span></a>
<a
role="menuitem"
href="catalyst.html"
><span>Catalysing and De-escalation</span></a>
<a
role="menuitem"
href="helpers.html"
><span>Advice for Helpers</span></a>
</div>
</details>
</aside>
<main id="main">
<h1>Using Our Webchat</h1>
<h2 id="what-is-a-webchat">What is a webchat?</h2>
<p>Webchats are irc clients that are inside your web browser. They are useful
in situations where you cannot install apps on the computer you are using.</p>
<p>We host 2 webchat options for our users to connect to Libera.Chat with.</p>
<ul>
<li><a href="https://web.libera.chat">Our main webchat</a> is a Kiwiirc instance that we
host. Kiwiirc has lots of features.</li>
<li><a href="https://web.libera.chat/gamja">Our lightweight webchat</a> is a Gamja
instance that we host. It is a more lightweight option.</li>
</ul>
<p>Simply click through to the webchat, provide a nickname and you can connect
to the network.</p>
<p>If the name you choose is currently in use, the webchat will add some
numbers to the end of it.</p>
<p>You can leave the password field blank if you have not
<a href="registration.html">registered with network services</a> yet.</p>
<p>You do not need to sign up for anything to connect to Libera.Chat using
the webchat. However, once connected, some things may require you to be
registered and logged in to the network services. These things include:</p>
<ul>
<li>Reserving a permanent nickname.</li>
<li>Getting a <code class="language-plaintext highlighter-rouge">user/nickname</code> cloak to replace your ip address or hostname
in some situations.</li>
<li>Joining or talking in certain channels.</li>
<li>Some people block unregistered users from sending them private messages.</li>
</ul>
<h2 id="linking-or-embedding">Linking or Embedding</h2>
<p>Embedding or linking to a webchat on your project or group’s website can
encourage people to engage with your community and help it grow.</p>
<p>However, if you just link directly to our webchat, people may not know how to
find your channel and become lost on the network. Often people show up in the
main <code class="language-plaintext highlighter-rouge">#libera</code> channel asking specific questions about a project. It can be
discouraging to them when nobody there knows what they are talking about!</p>
<p>Crafting a URL that pre-fills the webchat form with your channel can prevent
your users getting lost on the way.</p>
<p>Use the instructions below, but replace <code class="language-plaintext highlighter-rouge">#libera</code> with your channel instead.
If you wish for your new visitors to have a different pre-filled nick then
you can replace <code class="language-plaintext highlighter-rouge">Guest</code> in the URLs with the prefix of your choice.</p>
<p>Keep in mind that webchat visitors frequently don’t have accounts. Often it’s
their first time on IRC. If your channel has set the <code class="language-plaintext highlighter-rouge">+r</code> mode, then they will
not be able to join. You may need to reconsider the use of <code class="language-plaintext highlighter-rouge">+r</code>. While it is a
good idea to <a href="registration.html">advise users to register</a>, if this is
required it will discourage some users.</p>
<h3 id="kiwiirc">Kiwiirc</h3>
<p>To make a link for your users to click on that pre-fills your channel, you
can simply add the channel name on the end of the Kiwiirc url.</p>
<p>The following pre-fills the <code class="language-plaintext highlighter-rouge">#libera</code> channel:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://web.libera.chat/#libera
</code></pre></div></div>
<p>The following pre-fills the channel and also the nick field with the provided
prefix followed by a random number.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://web.libera.chat/?nick=Guest?#libera
</code></pre></div></div>
<p>If you omit the <code class="language-plaintext highlighter-rouge">?</code> immediately after the prefix, it will not show a random
number in the pre-fill, but numbers will be added if the provided nick is
already connected.</p>
<p>You can also embed our Kiwiirc client with these fields pre-filled.</p>
<p>To only pre-fill only the channel name:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"https://web.libera.chat/#libera"</span> <span class="na">style=</span><span class="s">"border:0; width:100%; height:450px;"</span><span class="nt">&gt;&lt;/iframe&gt;</span>
</code></pre></div></div>
<p>To pre-fill both the channel name and the nick prefix:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"https://web.libera.chat/?nick=Guest?#libera"</span> <span class="na">style=</span><span class="s">"border:0; width:100%; height:450px;"</span><span class="nt">&gt;&lt;/iframe&gt;</span>
</code></pre></div></div>
<h3 id="gamja">Gamja</h3>
<p>To make a link for your users to click on that pre-fills your channel, you
can simply add the channel name on the end of the Gamja url.</p>
<p>The following pre-fills the <code class="language-plaintext highlighter-rouge">#libera</code> channel:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://web.libera.chat/gamja/#libera
</code></pre></div></div>
<p>The following pre-fills the channel and the nickname. It does not append a
random number to the nickname at this point, but if they connect with a
nickname that is already in use, numbers will be appended.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>https://web.libera.chat/gamja/?nick=Guest#libera
</code></pre></div></div>
<p>You can also embed our Gamja client with these fields pre-filled.</p>
<p>To only pre-fill only the channel name:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"https://web.libera.chat/gamja/#libera"</span> <span class="na">style=</span><span class="s">"border:0; width:100%; height:450px;"</span><span class="nt">&gt;&lt;/iframe&gt;</span>
</code></pre></div></div>
<p>To pre-fill both the channel name and the nickname:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"https://web.libera.chat/gamja/?nick=Guest#libera"</span> <span class="na">style=</span><span class="s">"border:0; width:100%; height:450px;"</span><span class="nt">&gt;&lt;/iframe&gt;</span>
</code></pre></div></div>
<p>If a user connects with the pre-filled nick and someone else is already using
that nick, then numbers will be added at that point.</p>
</main><footer>
<div>
<span class="copyright">&copy; Libera Chat's contributors 2021</span>
(<a rel="license noopener noreferrer" href="../LICENSE-content.txt">Content CC BY-NC-SA</a>,
<a rel="license noopener noreferrer" href="../LICENSE-code.txt">Code MIT</a>)
<span class="mobile-hide">/</span>
<a href="../atom.xml">Feed (atom)</a>
<span class="mobile-hide">/</span>
<a href="../privacy.html">Privacy</a>
</div>
<div>
<a rel="me noopener noreferrer" href="https://fosstodon.org/@liberachat">Mastodon</a>
<span class="mobile-hide">/</span>
<a href="https://github.com/Libera-Chat/libera-chat.github.io" rel="noopener noreferrer">GitHub</a>
<span class="mobile-hide">/</span>
<a href="https://twitter.com/liberachat" rel="noopener noreferrer">Twitter</a>
<span class="mobile-hide">/</span>
<a href="https://facebook.com/liberachat" rel="noopener noreferrer">Facebook</a>
</div>
</footer>
Reference in a new issue Copy permalink