Adding aNinja Chatbot to Squarespace Website

Adding aNinja Chatbot to Squarespace Website can be done by using a simple Javascript code. Which is the aNinja Chatbot Embed Code.

Find your aNinja Chatbot Embed Code in your aNinja install before getting started.

Adding aNinja Chatbot to Squarespace Website

You can do this yourself or give this code to your developer.

  • In the “Home Menu“, click “Settings
  • Then hit  “Advanced
  • Click “Code Injection
  • Add the aNinja Chatbot embed code into the appropriate Code Injection fields for the footer.
  • After adding your code, click on the “Save” button.

Custom code doesn’t appear

Custom code may not appear for a few reasons:

  • You’re logged in – As a security measure, code in a code block may not appear for you when you’re logged in, even if visitors can see it. This happens when you try to view embedded JavaScript over a secure connection (https://). To test this, visit your site in an incognito browser.
  • The code is on an index page – Your code might not render if you’ve added it to a page within an index. To test this, remove the page from the index within the Pages panel, then visit your site in an incognito browser.

If the code still isn’t working, reach out to support@aninja.com.

Where do the Chatbot Conversations appear in aNinja

Now that you’ve added your Chatbot to your website, as a result, after every chatbot conversation, a new lead is created into your aNinja account with the info captured in the conversation.

If the lead closed the chatbot conversation before your reply, your message will appear in a bubble next to the chatbot on the website:

You can see these conversations:

  • In your inbox. Just select “Chatbot” from the All types drop down.
  • And in your Dashboard widget “Chatbot Conversations”. If you can’t see this widget, just enable it from the little gear on the top right of the dashboard.

Chatbot behavior

The chatbot pop-up gets triggered only for the first user visit to your site. It doesn’t automatically re-pop up on their subsequent visits, mainly because it gets annoying for repeat users. However, they can see that it’s in the bottom right section.

We can customize the following Chatbot behaviors:

  • Exposing the Chatbot initial greeting on every visit
  • Hiding the initial greeting message on page load
  • Delay showing the Chatbot widget for a number of seconds
  • Customizing widget container style to fit on the load page

Send us your request to support@aninja.com and we will implement the changes for you.

Squarespace API Integration

With Squarespace API Integration you can forward leads into your aNinja account simply using a programming code or an API. In this article, we show you how the Squarespace API Integration can be done.

Squarespace API Integration

The following example is specific to Squarespace (add in the “Page section Settings > Advanced tab > Page header code injection text area section for the page where you have the form you want to forward into aNinja).

// SQUARESPACE - example 1
// Add in javascript advanced:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(e) {
var contact_name = $("input[name='fname']").val();
var contact_email1 = $( "input[name='email']").val();
var phone_areacode = $('*[data-title="Areacode"]').val();
var phone_prefix= $('*[data-title="Prefix"]').val();
var phone_line = $('*[data-title="Line"]').val();
var contact_phone1 = phone_areacode+phone_prefix+phone_line;
var subject = $($('select')[0]).val();
var pref_contact_method = $($('select')[1]).val();
var message = $('textarea#textarea-yui_3_17_2_1_1442700176413_134868-field').val();

$.ajax({
type: 'post',
url: "https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY_HERE",
data: {
'contact_name': contact_name,
'contact_email1': contact_email1,
'contact_phone1': contact_phone1,
'your-comments': 'message: '+message+' subject:'+subject+' pref_contact_method: '+pref_contact_method
},
success: function (data) {
// alert('success');
}
});
});
});
</script>

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

Where does the imported data appear

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field, opportunities, and any other info that you have imported.

  • Lead’s contacts appear in the leads contact section in the lead view
  • Opportunities also appear in the opportunity section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with Squarespace API Integration? Leave us an email at support@aninja.com. And we will happily assist you.