Code Samples

This article contains code samples to create custom on-page experiences using Frase's Javascript SDK. Make sure Frase is installed on your page before implementing these methods.

If you are using Wordpress, or any modern CMS, you should be able to create a block of custom html where to embed code.

Open Frase Assistant on click:

This code triggers the Frase Assistant on click using the  frase.widget.open() method inside the onclick function.

<a onclick="frase.widget.open()">Click me and open Frase</a>

Hyperlink trigger with custom question:

This code triggers the Frase Assistant on click, also passing a specific question. It uses the frase.widget.ask() method inside the onclick function.

<a onclick="frase.widget.ask('how are you?')">Click me and ask question</a>

Custom input box:

This code sample uses the frase-input class to turn an input element into a question trigger. When the user types and hits enter, the question is passed to the Frase Assistant.

<div>
	<input placeholder="Ask me a question..." class="frase-input"/>
</div>

The code below is the same, but includes some custom CSS to make the input box look cleaner:

<div style="background-color: #fbfbfb; border: 1px solid rgb(0 0 0 / 10%);"> 
<div style="padding: 40px 20px;">
	<input style="border: none; background-color: transparent; border-radius: 3px; color: #555; outline: non	e; font-size: 18px; width: 100%;" placeholder="Ask me a question..." class="frase-input"/>
</div>
</div>