-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: 📝 Explain how to pass parent URL
- Loading branch information
1 parent
797ff18
commit 61e4ca1
Showing
7 changed files
with
229 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
--- | ||
sidebar_position: 4 | ||
--- | ||
|
||
# HTML & Javascript | ||
|
||
## Standard | ||
|
||
You can get the standard HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot. | ||
|
||
There, you can change the container dimensions. Here is a code example: | ||
|
||
```html | ||
<script src="https://unpkg.com/typebot-js@2.2"></script> | ||
<div id="typebot-container" style="width: 100%; height: 600px;"></div> | ||
<script> | ||
Typebot.initContainer('typebot-container', { | ||
url: 'https://viewer.typebot.io/my-typebot', | ||
}) | ||
</script> | ||
``` | ||
|
||
This code is creating a container with a 100% width (will match parent width) and 600px height. | ||
|
||
## Popup | ||
|
||
You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot. | ||
|
||
Here is an example: | ||
|
||
```html | ||
<script src="https://unpkg.com/typebot-js@2.2"></script> | ||
<script> | ||
var typebotCommands = Typebot.initPopup({ | ||
url: 'https://viewer.typebot.io/my-typebot', | ||
delay: 3000, | ||
}) | ||
</script> | ||
``` | ||
|
||
This code will automatically trigger the popup window after 3 seconds. | ||
|
||
### Open or Close a popup | ||
|
||
You can use these commands: | ||
|
||
```js | ||
Typebot.getPopupActions().open() | ||
``` | ||
|
||
```js | ||
Typebot.getPopupActions().close() | ||
``` | ||
|
||
You can bind these commands on a button element, for example: | ||
|
||
```html | ||
<button onclick="Typebot.getPopupActions().open()">Open the popup</button> | ||
``` | ||
|
||
## Bubble | ||
|
||
You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot. | ||
|
||
Here is an example: | ||
|
||
```html | ||
<script src="https://unpkg.com/typebot-js@2.2"></script> | ||
<script> | ||
var typebotCommands = Typebot.initPopup({ | ||
url: 'https://viewer.typebot.io/my-typebot', | ||
delay: 3000, | ||
}) | ||
</script> | ||
``` | ||
|
||
This code will automatically trigger the popup window after 3 seconds. | ||
|
||
### Open or close the proactive message | ||
|
||
You can use this command: | ||
|
||
```js | ||
Typebot.getBubbleActions().openProactiveMessage() | ||
``` | ||
|
||
You can bind this command on a button element, for example: | ||
|
||
```html | ||
<button onclick="Typebot.getBubbleActions().openProactiveMessage()"> | ||
Open proactive message | ||
</button> | ||
``` | ||
|
||
### Open or close the typebot | ||
|
||
You can use these commands: | ||
|
||
```js | ||
Typebot.getBubbleActions().open() | ||
``` | ||
|
||
```js | ||
Typebot.getBubbleActions().close() | ||
``` | ||
|
||
You can bind these commands on a button element, for example: | ||
|
||
```html | ||
<button onclick="Typebot.getBubbleActions().open()">Open the chat</button> | ||
``` | ||
|
||
## Additional configuration | ||
|
||
You can add hidden variable values in your embed code by adding the `hiddenVariables` option. Here is an example: | ||
|
||
```js | ||
Typebot.initContainer('typebot-container', { | ||
url: 'https://viewer.typebot.io/my-typebot', | ||
hiddenVariables: { | ||
'Current URL': window.location.href, | ||
'User name': 'John Doe', | ||
}, | ||
}) | ||
``` | ||
|
||
It will populate the `Current URL` variable with the parent URL and the `User name` variable with "John Doe". |
Oops, something went wrong.
61e4ca1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
viewer-v2-alpha – ./apps/viewer
apr.nigerias.io
sat.cr8.ai
aso.nigerias.io
bt.id8rs.com
bot.id8rs.com
am.nigerias.io
an.nigerias.io
ar.nigerias.io
apo.nigerias.io
vhpage.cr8.ai
games.klujo.com
eventhub.com.au
sakuranembro.it
chat.sureb4.com
bot.upfunnel.art
faqs.nigerias.io
stan.vselise.com
bot.piccinato.co
clo.closeer.work
voicehelp.cr8.ai
zap.techadviser.in
app.chatforms.net
bot.ansuraniphone.my
bot.cotemeuplano.com
bot.eventhub.com.au
typebot.stillio.com
bot.ottoinvestir.com
chat.hayurihijab.com
bot.incusservices.com
forms.webisharp.com
c23111azqw.nigerias.io
bot.meuesocial.com.br
gcase.barrettamario.it
mainmenu.diddancing.com
info.clickasuransi.com
aibot.angrybranding.co.uk
type.opaulovieira.com.br
serviziaziendali.online
hunterbot.saleshunter.ai
83242573.actualizar.xyz
brandnewdom.testetstt.com
piazzatorre.barrettamario.it
bot.comercializadoraomicron.com
personal-trainer.barrettamario.it
bookings.littlepartymonkeys.com
onboarding.libertydreamcare.ie
viewer-v2-alpha-typebot-io.vercel.app
studiotecnicoimmobiliaremerelli.it
boyfriend-breakup.riku.ai
viewer-v2-alpha-git-main-typebot-io.vercel.app
type.talitasouzamarques.com.br
61e4ca1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
docs – ./apps/docs
docs-git-main-typebot-io.vercel.app
docs.typebot.io
docs-typebot-io.vercel.app
61e4ca1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
viewer-v2 – ./apps/viewer
bergamo.store
bot.tvbeat.it
gollum.riku.ai
chat.hayuri.id
yoda.riku.ai
bot.joof.it
bots.bridge.ai
talk.gocare.io
app.yvon.earth
bot.jesopizz.it
fitness.riku.ai
bot.dsignagency.com
bot.rihabilita.it
zap.fundviser.in
bot.danyservice.it
bot.contakit.com
viewer.typebot.io
demo.wemakebots.xyz
chatbot.matthesv.de
88584434.therpm.club
bot.outstandbrand.com
bot.barrettamario.it
bot.eikju.photography
bot.digitalpointer.id
92109660.therpm.club
hello.advergreen.com
bot.robertohairlab.it
bot.coachayongzul.com
criar.somaperuzzo.com
bot.ilmuseoaiborghi.it
bot.pratikmandalia.com
form.bridesquadapp.com
88152257.actualizar.xyz
91375310.actualizar.xyz
michaeljackson.riku.ai
87656003.actualizar.xyz
arrivalx2.wpwakanda.com
link.venturasuceder.com
bot.hotelplayarimini.it
invite.bridesquadapp.com
bot.amicidisanfaustino.it
typebot-viewer.vercel.app
chat.thehomebuyersusa.com
forms.hiabhaykulkarni.com
casestudyemb.wpwakanda.com
bot.adventureconsulting.hu
herbalife.barrettamario.it
chat.atlasoutfittersk9.com
liveconvert.kandalearn.com
homepageonly.wpwakanda.com
mainmenu1one.wpwakanda.com
tarian.theiofoundation.org
bot.pinpointinteractive.com
bot.polychromes-project.com
viewer-v2-typebot-io.vercel.app
bot.seidibergamoseanchetu.it
bot.seidinembroseanchetu.it
liveconvert2.kandalearn.com
forms.escoladeautomacao.com.br
bot.studiotecnicoimmobiliaremerelli.it
viewer-v2-git-main-typebot-io.vercel.app
61e4ca1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
landing-page-v2 – ./apps/landing-page
landing-page-v2-typebot-io.vercel.app
www.typebot.io
landing-page-v2-git-main-typebot-io.vercel.app
typebot.io
get-typebot.com
www.get-typebot.com
61e4ca1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
builder-v2 – ./apps/builder
app.typebot.io
builder-v2-git-main-typebot-io.vercel.app
builder-v2-typebot-io.vercel.app